js原型链及继承的几种方式

前端之家收集整理的这篇文章主要介绍了js原型链及继承的几种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是原型链 ?

每个对象拥有一个原型对象,对象以其原型为模板,从原型继承属性方法。当然 原型对象 也可能拥有原型,并从中继承属性方法,依此类推,这种关系被称为原型链。
准确地说,这些属性方法定义在Object的构造器函数(constructor functions)之上的prototype属性上,而非对象实例本身
更详细介绍:

   /*父*/
function parent(){
 this.name = 'father';
 this.say = function(){
      console.log(this.name);
 }
}

一、构造继承:

通过使用call、apply方法可以在新创建的对象上执行构造函数,用父类的构造函数增加子类的实例
实现:

function child(){
parent.call(this);

}
优点:简单,直接父类属性方法
缺点:无法继承原型链上的属性方法

二、原型链继承:

利用原型链来实现继承,父类的一个实例作为子类的原型
实现:

function child(){
    this.xx = 'xx'; //子类自己的定义
}
child.prototype = new parent();
//这里new parent()父类对象并没有constructor属性,需要后面加上
child.prototype.constructor = child

优点:简单,既是子类实例也是父类实例,父类新加原型方法或者属性,子类都能访问到
缺点:不能实现多继承,所有子类的实例的原型都共享一个父类实例属性方法

三、组合式继承:

利用构造继承和原型链组合
实现:

funcion child(){
parent.call(this);
   }
   child.prototype = new parent();
   child.prototype = new parent();
//这里new parent()父类对象并没有constructor属性,需要后面加上
child.prototype.constructor = child

优点:解决了构造继承和原型链继承的问题
缺点:子类会拥有父类两份属性,只是子类的属性覆盖了父类属性

四、原型式继承:

采用原型式继承并不需要定义一个类,传入参数obj,生成一个继承obj对象的对象
实现:

function child(obj){
   function F(){}
F.prototype = obj 
return new F()

}
优点:直接通过对象生成一个继承该对象的对象
缺点:不是类式继承,而是原型式基础,缺少了类的概念

五、寄生式继承

创建一个仅仅用于封装继承过程的函数,然后在内部以某种方式增强对象,最后返回对象
实现:

function child(obj){
   function F(){}
F.prototype = obj;
return new F()

}
function createSubObj(superInstance){
var clone = child(superInstance)
return clone;
}
优点:原型式继承的一种拓展
缺点:依旧没有类的概念

六、寄生组合式继承

结合寄生式继承和组合式继承,完美实现不带两份超类属性的继承方式
实现:

function inheritPrototype(Super,Sub){
  var superProtoClone = Object.Create(Super.prototype)
  superProtoClone.constructor = Sub
  Sub.prototype = Super
}
function Sub(){
  Super.call()
  Sub.property = 'Sub Property'
}
inheritPrototype(Super,Sub)

优点:完美实现继承,解决了组合式继承带两份属性的问题
缺点:过于繁琐,故不如组合继承

原文链接:https://www.f2er.com/note/413574.html

猜你在找的程序笔记相关文章