javascript原理--> 实现继承的几种方式

62 阅读2分钟

原型链

我们知晓:

  1. 每一个实例都有一个构造函数。
  2. 每一个构造函数都有一个引用指向原型对象。
  3. 每一个原型对象同时有个 constructor 指向构造函数。

通过这个关系可以构建原型模式实现继承


function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function() {
    return this,property;
}

function SubType() {
    this.subProperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function() {
    return this.subProperty;
}

var sub = new SubType();
sub.getSuperValue() // true

原型链存在的两个问题:

  • 原型中父类包含的属性值会在所有实例间共享。
  • 子类实例化时不能给父类的构造函数传参。

盗用构造函数

为了解决原型模式遇到的引用问题,一个盗用构造函数的技术开始流行

function SuperType(name){
      this.name = name;
}

function SubType() {
// 继承 SuperType 并传参 SuperType.call(this, "Nicholas");
// 实例属性
     this.age = 29;
}
let instance = new SubType();
console.log(instance.name); // "Nicholas";
console.log(instance.age);  // 29

这种模式,子类不能访问父类原型上的方法,因此也不能单独使用。

组合式继承

使用原型链来继承父类原型上的方法,同时使用盗用构造函数来继承实例属性。

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
};
function SubType(name, age){ 
  // 继承属性 
  SuperType.call(this, name);
  this.age = age;
}

// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
    console.log(this.age);
};

let instance1 = new SubType("Nicholas", 29); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
instance1.sayName(); // "Nicholas"; instance1.sayAge(); // 29
let instance2 = new SubType("Greg", 27);
console.log(instance2.colors);  // "red,blue,green"
instance2.sayName();            // "Greg";
instance2.sayAge();  

原型式继承

即使不自定义类型,也可以利用原型实现对象之间的信息共享。

function object(o) {
      function F() {}
      F.prototype = o;
      return new F();
}

在es6中把这个概念规范化了,可以使用 Object.create()

寄生式继承

创建一个可以实现继承的函数,以某种方式增强对象,然后返回这个对象

function createAnother(original){
    let clone = Object(original); 
    // 通过调用函数创建一个新对象
    
    // 以某种方式增强这个对象
    clone.sayHi =  function() { 
        console.log("hi");
    };
    
    // 返回这个对象
    return clone;
}

寄生式组合继承

寄生式组合继承通过盗用构造函数继承属性,但使用混合式原型链继承方法。

基本思路是不通过调 用父类构造函数给子类原型赋值,而是取得父类原型的一个副本。

说到底就是使用寄生式继承来继承父类原型,然后将返回的新对象赋值给子类原型。寄生式组合继承的基本模式如下所示:

function inheritPrototype(subType, superType) {
    let prototype = Object(superType.prototype); 
    // 创建对象 
    prototype.constructor = subType; 
    // 增强对象 
    subType.prototype = prototype; 
    // 赋值对象
}

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function () {
    console.log(this.name);
};

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function () {
    console.log(this.age);
};

寄生式组合继承算是引用类型继承的最佳模式