javascript实现继承的方式有哪些
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。 JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal.prototype.eat = function(food) { console.log(this.name + '正在吃:' + food); }; 1、原型链继承核心: 将父类的实例作为子类的原型 function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.eat('fish')); console.log(cat.sleep()); console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //true 特点:
缺点:
2、构造继承核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型) function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true 特点:
缺点:
3、实例继承核心:为父类实例添加新特性,作为子类实例返回 function Cat(name){ var instance = new Animal(); instance.name = name || 'Tom'; return instance; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // false 特点:
缺点:
4、拷贝继承function Cat(name){ var animal = new Animal(); for(var p in animal){ Cat.prototype[p] = animal[p]; } // 如下实现修改了原型对象,会导致单个实例修改name,会影响所有实例的name值 // Cat.prototype.name = name || 'Tom'; 错误的语句,下一句为正确的实现 this.name = name || 'Tom'; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true 特点:
缺点:
5、组合继承核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用 function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } Cat.prototype = new Animal(); // 组合继承也是需要修复构造函数指向的。 Cat.prototype.constructor = Cat; // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // true 特点:
缺点:
6、寄生组合继承核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点 function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } (function(){ // 创建一个没有实例方法的类 var Super = function(){}; Super.prototype = Animal.prototype; //将实例作为子类的原型 Cat.prototype = new Super(); })(); // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); //true Cat.prototype.constructor = Cat; // 需要修复下构造函数 特点:
缺点:
附录代码:示例一: function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } //实例引用属性 this.features = []; } function Cat(name){ } Cat.prototype = new Animal(); var tom = new Cat('Tom'); var kissy = new Cat('Kissy'); console.log(tom.name); // "Animal" console.log(kissy.name); // "Animal" console.log(tom.features); // [] console.log(kissy.features); // [] tom.name = 'Tom-New Name'; tom.features.push('eat'); //针对父类实例值类型成员的更改,不影响 console.log(tom.name); // "Tom-New Name" console.log(kissy.name); // "Animal" //针对父类实例引用类型成员的更改,会通过影响其他子类实例 console.log(tom.features); // ['eat'] console.log(kissy.features); // ['eat'] 原因分析: 关键点:属性查找过程 执行tom.features.push,首先找tom对象的实例属性(找不到), 那么去原型对象中找,也就是Animal的实例。发现有,那么就直接在这个对象的features属性中插入值。 在console.log(kissy.features); 的时候。同上,kissy实例上没有,那么去原型上找。 刚好原型上有,就直接返回,但是注意,这个原型对象中features属性值已经变化了。 |
相关内容
-
win10多任务按键怎么设置在底部详细方法
win10多任务按键怎么设置在底部详细方法,按键,任务,在使用电脑...
-
设置里程碑|设置里程碑的方法有哪些
设置里程碑|设置里程碑的方法有哪些,,1. 设置里程碑的方法有哪...
-
Outlook的PST文件损坏的修复方法
Outlook的PST文件损坏的修复方法,文件, ...
-
手提电脑手写怎么设置|电脑手写设置方法
手提电脑手写怎么设置|电脑手写设置方法,,电脑手写设置方法看...
-
打印机常见故障排除方法HP5000打印机为例
打印机常见故障排除方法HP5000打印机为例,,HP 50005100打印机...
-
手机版wps里如何给字加拼音|wps在文字上加拼音
手机版wps里如何给字加拼音|wps在文字上加拼音的方法wps怎么...
-
小编辑器教你减少计算机网络流量的最简单方法
小编辑器教你减少计算机网络流量的最简单方法,,核心提示:教你如...
-
Android手机模拟器的安装方法_模拟器安装教程在
Android手机模拟器的安装方法_模拟器安装教程在计算机技能,,核...
-
如何升级路由器的路由器升级_192.168.1.1鲜为人
如何升级路由器的路由器升级_192.168.1.1鲜为人知的方法,,核心...
-
电脑装cpu风扇全过程|电脑cpu风扇安装方法
电脑装cpu风扇全过程|电脑cpu风扇安装方法,,1. 电脑cpu风扇安...
-
电脑硬盘启动设置教程|电脑硬盘启动设置方法
电脑硬盘启动设置教程|电脑硬盘启动设置方法,,1. 电脑硬盘启动...
-
先科电脑显示器无信号|先科显示器使用方法
先科电脑显示器无信号|先科显示器使用方法,,1. 先科显示器使用...
-
扬声器属性级别设置|扬声器属性高级
扬声器属性级别设置|扬声器属性高级,,1. 扬声器属性高级选择“...
-
萤石设置方法|萤石操作手册下载
萤石设置方法|萤石操作手册下载,,1. 萤石操作手册下载寻找验证...
-
笔记本电脑开机蓝屏|笔记本电脑开机蓝屏怎么解
笔记本电脑开机蓝屏|笔记本电脑开机蓝屏怎么解决方法,,笔记本...