【JS】JS继承实现的几种方式

1. 原型链继承

核心：将父类的实例作为子类的原型

//2.原型链继承
//父类
function parent() {
    this.name = "parent";
    this.color = ["blue", "green"];
}
//原型方法
parent.prototype.getName = function() {
    console.log(this.name);
}
 
//子类
function child() {
    this.type = "child";
}
child.prototype = new parent();
 
var c1 = new child();
var c2 = new child();
c1.color.push("red");
console.log(c1.color);  //[ 'blue', 'green', 'red' ]
console.log(c2.color);  //[ 'blue', 'green', 'red' ]
c1.name = "child";
//继承得到父类的原型方法
c1.getName();           //child

优点：

• 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
• 父类新增原型方法/原型属性，子类都能访问到
• 简单，易于实现

缺点：

• 要想为子类新增属性和方法，不能放到构造器中
• 无法实现多继承
• 来自原型对象的引用类型值的属性被所有实例共享
• 创建子类实例时，无法向父类构造函数传参

2. 构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）。
即在子类构造函数中通过apply()、call()方法调用父类构造函数。

//1.构造函数继承
//父类
function parent() {
    this.name = "parent";
    this.friend = ["Rose", "Mike"];
    this.getName = function() {
        console.log(this.name);
 
    }
}
 
//原型方法，子类不能继承原型属性/方法
parent.prototype.getFriend = function() {
    console.log(this.friend);
 
}
 
//子类
function child() {
    parent.call(this);
    this.type = "child";
}
var child1 = new child();
var child2 = new child();
child1.name = "child";
child1.friend.push("Tom");
console.log(child1.friend);  //[ 'Rose', 'Mike', 'Tom' ]
console.log(child2.friend);  //[ 'Rose', 'Mike', 'Tom' ]
child1.getName();  //child
// child1.getFriend();  //子类不能继承到父类原型方法，报错

优点：

• 解决了子类实例共享父类引用属性的问题
• 创建子类实例时，可以向父类传递参数
• 可以实现多继承（call多个父类对象）

缺点：

• 实例并不是父类的实例，只是子类的实例
• 只能继承父类的实例属性和方法，不能继承原型属性/方法
• 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3. 组合继承（原型链+构造）

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

//3.组合继承
//父类
function parent() {
    this.name = "parent";
    this.color = ["blue", "green"];
}
//原型方法
parent.prototype.getName = function() {
    console.log(this.name);
}
 
//子类
function child() {
    parent.call(this);
    this.type = "child";
}
child.prototype = new parent();
var c1 = new child();
var c2 = new child();
c1.color.push("red");
console.log(c1.color, c2.color);  //[ 'blue', 'green', 'red' ] [ 'blue', 'green' ]
c1.name = "child";
c1.getName();       //child

优点：

• 可以继承实例属性/方法，也可以继承原型属性/方法
• 既是子类的实例，也是父类的实例
• 不存在引用属性共享问题
• 可传参
• 函数可复用

缺点：

• 调用了两次父类构造函数，生成了两份实例

4. 组合继承的优化1

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类原型对象直接给到子类，实现父类构造函数只执行一次

//4. 组合继承的优化1
//父类
function parent() {
    this.name = "parent";
    this.color = ["blue", "green"];
}
//原型方法
parent.prototype.getName = function() {
    console.log(this.name);
}
 
//子类
function child() {
    parent.call(this);
    this.type = "child";
}
child.prototype = parent.prototype;
var c1 = new child();
var c2 = new child();
c1.color.push("red");
console.log(c1.color, c2.color);  //[ 'blue', 'green', 'red' ] [ 'blue', 'green' ]
c1.name = "child1";
c1.getName();   //child1
console.log(c1);
/*parent {
 name: 'child1',
 color: [ 'blue', 'green', 'red' ],
 type: 'child'
}*/

优点：

• 可以继承实例属性/方法，也可以继承原型属性/方法
• 不存在引用属性共享问题
• 可传参
• 函数可复用

缺点：

• 子类实例的构造函数是Parent，明显是错误的。

5. 寄生组合继承（组合继承的优化2）【推荐使用】

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

//5.寄生组合继承
//父类
function parent() {
    this.name = "parent";
    this.color = ["blue", "green"];
}
 
//原型方法
parent.prototype.getName = function() {
    console.log(this.name);
}
 
//子类
function child() {
    parent.call(this);
    this.type = "child";
}
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
var c1 = new child();
var c2 = new child();
c1.color.push("red");
console.log(c1.color, c2.color);  //[ 'blue', 'green', 'red' ] [ 'blue', 'green' ]
c1.name = "child1";
c1.getName();   //child1
console.log(c1);
/*child {
  name: 'child1',
  color: [ 'blue', 'green', 'red' ],
  type: 'child'
}*/

优点：

• 可以继承实例属性/方法，也可以继承原型属性/方法
• 不存在引用属性共享问题
• 可传参
• 函数可复用
• 子类实例的构造函数是Parent