js的继承看这一篇就够了

js的六种继承方式详解：

第一种：类式继承

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

Super.prototype.getName = function() {
    console.log(this.name);
}

function Sub(age) {
    this.age = age;
}

Sub.prototype = new Super('super');
复制代码

缺点：无法在子类中初始化父类的属性

第二种：构造式继承

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

Super.prototype.getName = function() {
    console.log(this.name)
}

function Sub(name, age) {
    Super.call(this, name)
    this.age = age
}
复制代码

缺点：子类无法继承父类的原型，

第三种：组合式继承

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

Super.prototype.getName = function() {
    console.log(this.name)
}

function Sub(name, age) {
    Super.call(this, name)
    this.age = age
}

Sub.prototype = new Super();
复制代码

缺点：实例化子类的时候调用父类的构造函数两次，造成不必要的实例化开销

第四种：原型继承

function inhert(obj) {
    function F () { }
    F.prototype = obj;
    return new F()
}
复制代码

缺点：无法继承原型属性的引用属性，因为这是对继承对象的属性的浅复制

第五种：寄生式继承

function otherInhert(obj) {
    var o = inhert(obj);
    o.getName = function() {
        console.log('testName');
    }
    
    return o
}
复制代码

其实这就是原型式继承的二次封装，方便为继承对象扩展新的方法和属性

第六种：寄生式组合继承(终极继承方法)

function lastInhert(subClass, supClass) {
    var p = inhert(supClass.prototype);
    // 修正子类的构造函数的指向
    p.constructor = subClass;
    subClass.prototype = p;
}

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

Super.prototype.getName = function() {
    console.log(this.name)
}

function Sub(name, age) {
    Super.call(this, name)
    this.age = age
}

lastInhert(Sub, Super);

Sub.prototype.say = function() {
    console.log(this.age);
}

复制代码

优点：修复了组合式继承的两次调用父类构造问题的实例化开销

其实 js 的原型继承都有一个坑：就是构造类的原型属性在使用引用类型数据时一定要注意，所有的子类都会公用此引用属性。除非你是业务需求，否则就应该吧此类属性放在构造函数体内。

转载于:https://juejin.im/post/5cdbc76be51d456e4c4c0102