[JavaScript知识库]JS 继承的六种方式

由于函数没有签名，在 ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承，而且其实现继承的主要方式是依靠原型链来实现的。

原型链继承????????

构造函数、原型链和实例的关系：每个构造函数都有一个原型对象（prototype），每一个原型对象都包含一个指向构造函数的指针（constructor），每一个实例都包含一个指向原型对象的内部指针（__proto__）。

所有引用类型默认都继承了 Object，这个继承也是通过原型链实现的。

重点：让子类的原型等于父类的实例。

注意：

• 子类型有时需要覆盖超类型或者添加超类型的方法，在给原型添加方法的代码一定要放在替换原型之后。
• 创建子类实例时，无法向父类传参。
• 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）
• 子类的原型的 constructor 会指向子类的新原型（父类的实例）的原型（__proto__）的 constructor。

// 父类
function Person(name) {
    this.name = name;
    this.sum = function() {
        console.log(this.name)
    }
}
Person.prototype.age = 18;

// 子类
function Child() {
    this.name = 'kid'
}

Child.prototype = new Person(); // 原型链继承重点

借用构造函数继承

重点：在子类构造函数内部调用父类构造函数，使用 call() 和 apply() 方法将父类构造函数引入子类构造函数。

优点：

• 解决了原型链继承的缺点
• 可以继承多个构造函数（call / apply 多个）。
• 可以向父类传参。

缺点：

• 只能继承父类构造函数的属性，没有继承父类原型的属性。
• 无法实现构造函数的复用。

// 父类
function Person(name) {
    this.name = name;
    this.sum = function() {
        console.log(this.name)
    }
}
Person.prototype.age = 18;

// 子类
function Child() {
    Person.call(this, 'hhhqzh'); // 借用构造函数继承重点
 
    this.name = 'kid';
}

组合继承（伪经典继承；原型链 + 借用构造函数）常用

将原型链基础和借用构造函数继承组合起来。

使用原型链实现对父类原型属性和方法的继承，且通过借用构造函数来实现对实例属性的继承。保即通过在原型上定义方法实现了函数的复用，又能够保证每个实例有自己的属性。

重点：结合两种继承模式的优点，传参和复用。

优点：

• 可以继承父类原型上的属性和方法，可以对父类构造函数进行传参，复用。
• 每个子类实例引入的构造函数属性是私有的，不像原型链继承一样是共享的。

缺点：

• 调用两次父类构造函数（耗内存）。
• 子类的原型的 constructor 会指向子类的新原型（父类的实例）的原型（__proto__）的 constructor。

// 父类
function Person(name) {
    this.name = name;
    this.sum = function() {
        console.log(this.name)
    }
}
Person.prototype.age = 18;

// 子类
function Child(name) {
    Person.call(this, name); // 借用构造函数继承重点
}


Child.prototype = new Person(); // 原型链继承重点

let child = new Child('hhhqzh');

console.log(child.name); // hhhqzh 继承了父类构造函数的属性
console.log(child.age); // 18 继承父类原型的属性

原型式继承

借助原型可以基于已有的对象创建新对象，同时不必因此创建自定义类型。

重点：必须要有一个对象作为另一个对象的基础，用一个函数来包装一个对象，然后返回一个新对象。

特点：类似于复制一个对象，用函数包装。Object.create 利用了这个原理。

缺点：

• 所有实例都继承原型上的属性。
• 无法实现复用。（新实例的属性都是后添加的）

// 父类
function Person(name) {
    this.name = name;
    this.sum = function() {
        console.log(this.name)
    }
}
Person.prototype.age = 18;

// 先封装一个函数容器，在函数内部创建一个临时构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个构造函数的实例。
function object(obj) {
    function F(){};
    F.prototype = obj;
    return new F();
}

let person = new Person('hhhqzh');
let child = object(person);
console.log(child.name); // hhhqzh 继承了父类函数的属性

寄生式继承

创建一个仅用于封装集成过程的函数，在该函数内部（任何能返回新对象的函数，比如原型式继承）来增强对象，最后返回对象。

缺点：没用到原型，无法实现复用。

// 父类
function Person(name) {
    this.name = name;
    this.sum = function() {
        console.log(this.name)
    }
}
Person.prototype.age = 18;

// 先封装一个函数容器，在函数内部创建一个临时构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个构造函数的实例。
function object(obj) {
    function F();
    F.prototype = obj;
    return new F();
}

// 创建一个封装继承过程的函数，该函数在内部以某种方式增强对象。
function creeateAnother(original){
    let clone = object(original); // 继承过程
    clone.name = 'ppptyp';
    clone.sayHi = function() {
        console.log("hi");    
    }
    return clone;
}

let person = new Person('hhhqzh');
let child = creeateAnother(person);
child.sayHi(); // hi
console.log(child.name); // ppptyp 

寄生组合式继承（常用）

即通过借用构造函数来继承属性，又通过原型链的混成形式来继承方法。本质上是使用寄生式继承来继承父类型的原型（父类的原型等于一个实例），然后再将这个实例指定给子类型的原型。

优点：修复了组合继承的问题（调用两次构造函数）

// 父类
function Person(name) {
    this.name = name;
    this.sum = function() {
        console.log(this.name)
    }
}
Person.prototype.age = 18;

// 子类
function Child(name) {
    Person.call(this, name); // 借用构造函数继承
}

// 原型式继承
function object(obj) {
    function F();
    F.prototype = obj;
    return new F();
}

// 寄生
function creeateAnother(Child, Person){
    let prototype = object(Person.prototype); // 继承过程
    prototype.constructor = Child;
    Child.prototype = prototype;
}

// Child.prototype = new Person(); // 原型链继承
creeateAnother(Child, Person); // 替换原型链继承

let child = new Child('hhhqzh');

console.log(child.name); // hhhqzh 继承了父类构造函数的属性
console.log(child.age); // 18 继承父类原型的属性