美文网首页
原型继承总述

原型继承总述

作者: newway_001 | 来源:发表于2019-06-06 20:29 被阅读0次

原型链继承:

function SuperType() {   

 this.color = ['yellow','black','green'];
}
SuperType.prototype.sayName = function () {  
console.log(this.name);
};
function SubType(){
}
var instance1=new SubType();
instance1.colors.push('red');
console.log(instance1.colors);//“'yellow','black','green','red'”

var instance2=new SubType();
console.log(instance2.colors);//“'yellow','black','green','red'”

原型链继承有两个问题
1:属性共享,上面的例子中打印的colors一样;
2:创建子类的实例中,不能向超类的构造函数传递参数;

为了解决这两个问题
提出了组合继承

组合继承

function SuperType(name) {   
this.name=name;
 this.color = ['yellow','black','green'];
}
SuperType.prototype.sayName = function () {  
console.log(this.name);
};
function SubType(name,age){
/**增加的点**/
SuperType.call(this,name);//继承属性//第二次调用SuperType()
this.age=age;
}
SubType.prototype=new SuperType();//第二次调用SuperType()
SubType.prototype.constructor=SubType;

组合继承虽然解决了原型链中共享属性问题以及不能向超类的构造函数传递参数问题,但也产生了新的问题

上面的例子中,我们第一次调用SuperType(),SubType.prototype得到了俩属性name、color。第二次调用SuperType(),又在新对象上创建了新的实例属性name、color。这俩属性屏蔽了原型中得name、color。

创建了不必要的多余的属性

为了优化这个问题。
我们可以使用:

寄生组合继承

//继承SuperType的原型
function inheritPrototype(subType,superType){

      var prototype=Object.create(superType.prototype);//es6方法
 //创建父类原型的一个副本 等同于使用Object.create(superType.prototype)
      prototype.constructor=subType;   
//为副本添加constructor属性,弥补重写原型而失去的constructor属性
      subType.prototype=prototype;
 //将创建的对象(副本)赋值给子类的原型
}
function SuperType(name){
      this.name=name;
      this.friends=["gay1","gay2"];
}
SuperType.prototype.sayName=function(){
      alert(this.name);
};
function SubType(name,age){
      SuperType.call(this,name);  //继承SuperType的属性
      this.age=age;       //扩展出age属性
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge=function(){
       alert(this.age);
};//扩展出sayAge方法

inheritPrototype()函数让子类构造函数继承了超类原型;
SuperType.call(this,name)让子类构造函数继承了超类属性

这个例子的高效率体现在它只调用了一次SuperType构造函数,
并且因此避免了在SubType.prototype上创建不必要的 多余的属性.与此同时,原型链还能保持不变.因此,还能够正常使用instanceof 和isPrototypeOf确定继承关系.

相关文章

  • 原型继承总述

    原型链继承: 原型链继承有两个问题1:属性共享,上面的例子中打印的colors一样;2:创建子类的实例中,不能向超...

  • 关于继承

    继承的实现方法 属性拷贝 浅拷贝 深拷贝 原型继承 原型式继承 原型链继承 组合继承(深拷贝+优化后的原型式继承)...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js 继承

    4种继承方式 原型式继承给原型对象添加属性原型替换子类的原型对象替换为父类的原型对象 原型链继承 借用构造函数继承...

  • 总结JavaScript几种继承的方式及优缺点

    1. 原型继承 原型继承是比较常见一种继承方式 从上图中可以看到, 原型继承的特点: 注意:原型继承的缺点 如果...

  • 前端面试题总结【38】:javascript继承的 6 种方法

    原型链继承 借用构造函数继承 组合继承(原型+借用构造) 原型式继承 寄生式继承 寄生组合式继承 推荐: 持续更新...

  • 继承

    常见的继承方式有 原型继承、组合继承、寄生组合继承、类的继承 ①原型继承:它的原理就是,利用原型链继承父级构造函数...

网友评论

      本文标题:原型继承总述

      本文链接:https://www.haomeiwen.com/subject/lqtpxctx.html