6种JavaScript继承方式及优缺点(小结)(2)

以上例子解释:
①创建一个函数fun,内部定义一个构造函数Son
②将Son的原型对象设置为参数,参数是一个对象,完成继承
③将Son实例化后返回,即返回的是一个实例化对象
优缺点:跟原型链类似

第五种:寄生继承

在原型式继承的基础上,在函数内部丰富对象

function fun(obj) { function Son() { }; Son.prototype = obj; return new Son(); } function JiSheng(obj) { var clone = fun(obj); clone.Say = function () { console.log('我是新增的方法'); } return clone; } var parent = { name: '张三' } var parent1 = JiSheng(parent); var parent2 = JiSheng(parent); console.log(parent2.Say==parent1.Say);// false

以上例子解释:
①再原型式继承的基础上,封装一个JiSheng函数
②将fun函数返回的对象进行增强,新增Say方法,最后返回
③调用JiSheng函数两次,分别赋值给变量parent1、parent2
④对比parent1、parent2,结果为false,实现独立
优缺点:跟构造函数继承类似,调用一次函数就得创建一遍方法,无法实现函数复用,效率较低

这里补充一个知识点,ES5有一个新的方法Object.create(),这个方法相当于封装了原型式继承。这个方法可以接收两个参数:第一个是新对象的原型对象(可选的),第二个是新对象新增属性,所以上面代码还可以这样:

function JiSheng(obj) { var clone = Object.create(obj); clone.Say = function () { console.log('我是新增的方法'); } return clone; } var parent = { name: '张三' } var parent1 = JiSheng(parent); var parent2 = JiSheng(parent); console.log(parent2.Say==parent1.Say);// false

第六种:寄生组合继承

利用组合继承和寄生继承各自优势
组合继承方法我们已经说了,它的缺点是两次调用父级构造函数,一次是在创建子级原型的时候,另一次是在子级构造函数内部,那么我们只需要优化这个问题就行了,即减少一次调用父级构造函数,正好利用寄生继承的特性,继承父级构造函数的原型来创建子级原型。

function JiSheng(son,parent) { var clone = Object.create(parent.prototype);//创建对象 son.prototype = clone; //指定对象 clone.constructor = son; //增强对象 } function Parent(name){ this.name = name; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(name){ Parent.call(this,name); } JiSheng(Son,Parent); son1 = new Son('张三'); son2 = new Son('李四'); son1.type.push('VUE'); son2.type.push('PHP'); console.log(son1.type);//['JS','HTML','CSS','VUE'] console.log(son2.type);//['JS','HTML','CSS','PHP'] son1.Say();//张三 son2.Say();//李四

以上例子解释:
①封装一个函数JiSheng,两个参数,参数1为子级构造函数,参数2为父级构造函数
②利用Object.create(),将父级构造函数原型克隆为副本clone
③将该副本作为子级构造函数的原型
④给该副本添加constructor属性,因为③中修改原型导致副本失去默认的属性

优缺点:
组合继承优点、寄生继承的有点,目前JS继承中使用的都是这个继承方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/b900edfb05cc55ee669babe36953ee1e.html