JavaScript之深入多种继承方式

一、前言

上一篇文章讲解了JavaScript之深入原型与原型链，继承本质就是在构造函数和原型上进行一系列的操作，以达到子类能访问到父类的属性和方法。下面会介绍多种继承方式，及每种继承的优缺点。

二、构造函数继承

构造函数的继承使用.call()或.apply()方法，在子类中调用父类的构造函数，本质上是在子类中引用父类的构造函数，初始化父类构造函数。代码如下

    function Person(name) {
        this.name = name;

        this.show = function() {
            console.log(`构造函数中的方法：${this.name}`);
        }
    }
    Person.prototype.showName = function() {
        console.log(`原型链上的方法： ${this.name}`);
    }
    function Man(name) {
        Person.call(this, name);
    }
    const m = new Man('chicABoo');
    console.log(m instanceof Man);  // true
    console.log(m instanceof Person); // false
    m.show(); // 构造函数中的方法：chicABoo
    m.showName(); // typeError: m.showName is not a function

上面的代码定义了一个Person构造函数，Person中有属性name和show方法，Person的原型对象上定义了showName方法；构造函数Man中通过.call()的方法，初始化了父类的构造函数，即能Man继承了父类的构造函数。
优点：
1、子类能成功继承到父类的构造函数；
2、子类能继承多个父类的构造函数；
3、可以通过call或apply方法向父类传参；

缺点：
1、只能继承到父类构造函数的属性和方法，无法继承原型链上的属性和方法；
2、每个新的实例都会创建父类的副本；
3、无法实现构造函数的复用，每次都要调用；

三、原型链继承

原型链继承的方式，通过子类的原型对象去指向父类的实例，这样能继承到父类原型链上的属性和方法，代码如下

    function Person() {}
    Person.prototype.name = 'chicAboo';
    Person.prototype.showName = function() {
        console.log(this.name);
    };
    function Man() {}
    Man.prototype = new Person(); // 关键代码
    const p = new Person();
    p.age = 35;
    const m = new Man();
    m.showName(); // chicAboo
    console.log(m instanceof Man);  // true
    console.log(m instanceof Person); // true
    console.log(m.age); // undefined

原型链继承，通过子类的原型对象等于父类的实例，实现继承。
优点：
1、子类可继承父类构造函数中的属性、原型链上的属性和方法。

缺点：
1、子类创建的实例无法向父类传参；
2、父类引用类型的属性被所有实例所共享；如下：

    function Person() {}
    Person.prototype.names = [];
    Person.prototype.showName = function() {
        console.log(this.names);
    };
    function Man() {}
    Man.prototype = new Person(); // 关键代码
    const m1 = new Man();
    m1.names.push('张三');
    const m2 = new Man();
    m2.showName(); // ['张三']

从上面例子能看到，在父类Person的原型链上是引用类型即时，在子类实例m1上push一个值，m2也能访问。

三、组合继承

原型链继承和构造函数继承，都存在致命的缺点，原型链继承不能传参、原型链上属性为引用类型时会被所有的实例所共享；构造函数继承，只能继承到构造函数的属性和方法，每次创建实例，父类都重新生成一遍。为了解决这些问题，将它们组合起来使用，便解决了这些问题，同时组合继承也是JavaScript最常用的继承方式。

    function Person(name) {
        this.name = name;
        this.names = [];
    }
    Person.prototype.showName = function() {
        console.log(this.name);
    };
    function Man(name, age) {
        Person.call(this, name);
        this.age = age;
    }
    Man.prototype.showAge = function () {
        console.log(this.age);
    };
    Man.prototype = new Person; // 原型链继承关键代码
    Man.prototype.constructor = Man; // Man的原型对象的constructor指向Person，需手动指回来

    const m1 = new Man('张三', 20);
    const m2 = new Man('李四', 25);
    m1.names.push(100);
    console.log(m2.names); // []

优点：
1、结合了前两种构造函数的优点，构造函数继承传参和原型链继承复用；
2、每个实例引用的构造函数属性都是私有的；

缺点：
1、调用了两次父类构造函数，Person.call(this)和Man.prototype = new Person()
2、子类上的构造函数会代替父类原型链上的构造函数（这不能算是缺点，上章讲过，类中查找属性和方法时，现在构造函数中查找，如果找不到，才会在原型链上查找，直到找到为止）

四、原型式继承

    function create(obj) {
        function F() {}
        F.prototype = obj;
        return new F();
    }

用函数包装一个对象，返回这个函数的调用。ES5中Object.create的模拟实现，将传入对象作为创建对象的原型。
缺点：
1、 引用类型的属性值，会被所有的实例所共享，类似原型链。如下：

    function create(obj) {
        function F() {}
        F.prototype = obj;
        return new F();
    }

    const obj = {
        name: 'chicABoo',
        names: ['zs', 'ls']
    };
    const c1 = create(obj);
    const c2 = create(obj);
    c1.names.push('ww');
    console.log(c2.names); // ['zs', 'ls', 'ww]

五、寄生式继承

创建一个用于继承过程的封装函数，该函数内部以某种形式来做增强函数，返回该对象。

    function createObj (obj) {
        const clone = Object.create(obj);

        clone.show = function () {
            console.log('something...');
        };

        return clone;
    }

这种方式类似构造函数继承，每次创建就会创建父类的构造函数。
缺点：
1、没有原型，无法复用；
2、每次都会创建一遍父类的构造函数；

六、寄生组合式继承（常用）

寄生组合在继承修正了组合继承调用两次父类问题，那么如何修正的呢？先看下组合继承，如下：

    function Person(name) {
        this.name = name;
        this.names = [];
    }
    Person.prototype.showName = function() {
        console.log(this.name);
    };
    function Man(name, age) {
        Person.call(this, name); // 第二次调用父类
        this.age = age;
    }
    Man.prototype.showAge = function () {
        console.log(this.age);
    };
    Man.prototype = new Person(); // 第一次调用父类
    Man.prototype.constructor = Man;

    const m1 = new Man('张三', 20);
    const m2 = new Man('李四', 25);
    m1.names.push(100);
    console.log(m2.names); // []

从上面的代码可以看到，子类共调用了父类两次。
第一次调用是子类的原型对象指向父类实例时

Man.prototype = new Person()

第二次调用时子类实例时，初始化了父类

const m1 = new Man('张三', 20);
// ....
Person.call(this, name);

借鉴寄生式继承方式，可以避免Man.prototype = new Person()这一次调用，封装一个函数，创建父类的副本，为副本添加构造函数，并将副本赋给子类的原型。如下：

    function inheritPrototype(_sub, _super) {
        var prototype = Object.create(_super.prototype); // 创建Super对象原型的副本
        prototype.constructor = _sub; // 为创建的副本添加构造函数
        _sub.prototype = prototype; // 将新创建的副本赋值给子类的原型
    }

完整代码如下：

    function Person(name) {
        this.name = name;
    }
    Person.prototype.showName = function () {
        console.log(this.name);
    };
    function Man (name, age) {
        Person.call(this, name);
        this.age = age;
    }
    function inheritPrototype(_sub, _super) {
        var prototype = Object.create(_super.prototype); // 创建Super对象原型的副本
        prototype.constructor = _sub; // 为创建的副本添加构造函数
        _sub.prototype = prototype; // 将新创建的副本赋值给子类的原型
    }
    inheritPrototype(Man, Person);

    const c1 = new Man('chicABoo', 35);
    c1.showName(); // chicABoo
    console.log(c1.age); // 35
    console.log(c1 instanceof Man); // true
    console.log(c1 instanceof Person); // true

借用高程上的话来说：
这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,941评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,397评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,345评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,851评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,868评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,688评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,414评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,319评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,775评论 1赞 315
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,945评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,096评论 1赞 350
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,789评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,437评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,993评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,107评论 1赞 271
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,308评论 3赞 372
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,037评论 2赞 355