小结JS实现继承的几种方式

js中的继承与其说是对象的继承，但更像是让函数的功能和用法的复用，组合；例如两个不同的函数各有各的方法，但是我想拥有两个函数所有的方法，就可以通过继承得到，下面总结了js实现继承的几种方式以及各自的优缺点：

首先定义一个父类

// 定义一个父类
function Father(name) {
    // 属性
    this.name = name || '->father';
    // 实例方法
    this.sayName = function() {
        console.log(this.name);
    }
}
// 原型方法
Father.prototype.age = 18;
Father.prototype.sayAge = function() {
    console.log(this.age);
}

准备好了么？ 要开始了哦~

1、原型链继承：将父类的实例作为子类的原型

function Son(name) {
    // Father.call(this);
    this.name = name || '->son';
}
Son.prototype = new Father();
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true

• 优点
  • 纯粹的继承关系，实例是子类的实例，也是父类的实例
  • 父类新增原型方法、原型属性，子类都能访问到
  • 简单，易于实现
• 缺点
  • 可以在Son构造函数中，为Son实例增加实例属性。新增的属性和方法必须放在new Father()这样的语句之后执行。
  • 无法实现多继承，因为原型一次只能被一个实例更改
  • 来自原型对象的所有属性被所有实例共享
  • 创建子类实例时，无法向父构造函数传参

2、构造继承：复制父类的实例属性给子类

function Son(name) {
    Father.call(this);
    this.name = name || '->son';
}
var s = new Son('son');
console.log(s.name); // son
//s.sayAge(); // 抛出错误
s.sayName(); // son
console.log(s.age); // undefined
console.log(s instanceof Father); // false
console.log(s instanceof Son); // true

• 优点
  • 解决了原型链继承中子类实例共享父类引用属性的问题
  • 创建子类实例时，可以向父类传递参数
  • 可以实现多继承（call多个父类对象）
• 缺点
  • 实例并不是弗雷德实例，只是子类的实例
  • 只能继承父类实例的属性和方法，不能继承其原型上的属性和方法
  • 无法实现函数复用，每个子类都有父类实例的副本，影响性能

3、实例继承：为父类实例添加新特征，作为子类实例返回

function Son(name) {
    var f = new Father();
    f.name = name || '->son'
    return f;
}
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // false

• 优点
  • 不限制调用方法，不管是new子类()还是子类()，返回的对象具有相同的效果
• 缺点
  • 实例是父类的实例，不是子类的实例
  • 不支持多继承

4、拷贝继承：对父类实例中的的方法与属性拷贝给子类的原型

function Son(name) {
    var f = new Father();
    for(var k in f) {
        Son.prototype[k] = f[k];
    }
    Son.prototype.name = name || '->son';
}
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // false
console.log(s instanceof Son); // true

• 优点
  • 支持多继承
• 缺点
  • 效率低，性能差，占用内存高（因为需要拷贝父类属性）
  • 无法获取父类不可枚举的方法（不可枚举的方法，不能使用for-in访问到

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

function Son(name) {
    Father.call(this);
    this.name = name || '->son'
}
Son.prototype = new Father();
// 修复构造函数指向
Son.prototype.constructor = Son;
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true

• 优点
  • 弥补了构造继承的缺点，现在既可以继承实例的属性和方法，也可以继承原型的属性和方法
  • 既是子类的实例，也是父类的实例
  • 不存在引用属性共享问题
  • 可传参
  • 函数可以复用
• 缺点
  • 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6、寄生组合继承：通过寄生方式，砍掉父类的实例属性，避免了组合继承生成两份实例的缺点

function Son(name) {
    Father.call(this);
    // var f = new Father();
    this.name = name || '->son'
}
(function() {
    // 创建一个没有实例方法的类
    var None = function() {};
    None.prototype = Father.prototype;
    // 将实例作为子类的原型
    Son.prototype = new None();
    // 修复构造函数指向
    Son.prototype.constructor = Son;
})();
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true

• 优点
  • 堪称完美
• 缺点
  • 实现起来较为复杂

7、Class继承：使用extends表明继承自哪个父类，并且在子类构造函数中必须调用super

class Son extends Father {
    constructor(name) {
        super(name);
        this.name = name || '->father';
    }
}
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true