这次，彻底弄清js的继承方式

关于js继承的文章一直以来是数不胜数，每隔一段时间就会复习一下，感觉明白了，但是过段时间又忘记了。有人说ES6的class不是用的挺好的吗，还需要去了解ES5及之前的继承原理做什么。别的不说，读一读vue2.0的源码，class继承有他的局限性，不利于代码的分层和模块的拆分，基于原型链去拓展方法可以很好地拆分功能模块，极大的提高代码的复用性。

本文是基于《JavaScript高级程序设计（第三版）》做的总结，有兴趣的话，去读一读，它就像前端开发者的实用手册一般，遇到不懂的知识点去查一查，翻一翻，逐步地填充自己的知识盲点，形成系统的知识体系。

首先创造一个超类型的构造函数Super，他拥有自己的静态属性name，以及原型链方法getSuper。再创造一个子类构造函数Sub。下面我们将使用6种方法去分析如何让Sub继承Super，并讨论下各自的优劣。

1.原型链继承

function Super() {
    this.name = ["super"];
}
Super.prototype.getSuper = function () {
    return this.name;
}

function Sub() {}
Sub.prototype = new Super();

var sub1 = new Sub();
sub1.name.push("sub1");

var sub2 = new Sub();
sub2.name.push("sub2");

console.log(sub2.getSuper())  //["super", "sub1", "sub2"]

将Sub的原型对象Sub.prototype指向Super的实例，然后创建两个Sub的实例sub1、sub2。这样我们可以在Sub中继承Super的属性name以及原型链方法getSuper，然而在sub1中修改name时，sub2的name也受到了影响。

将子类的原型对象指向超类型的实例的方法称作是原型链继承。这种继承方式的缺点是：

  • 超类型的属性会被所有实例共享
  • 子类的实例不能向超类型构造函数传参

2.构造函数继承

function Super(name) {
    this.name = name
}
Super.prototype.getSuper = function () {
    return this.name;
}

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

var sub1 = new Sub("Tom");
// console.log(sub1.getSuper()) //Uncaught TypeError
console.log(sub1.name)  //Tom

var sub2 = new Sub();
console.log(sub2.name)  //undefined

var sup = new Super()
console.log(sup.getSuper())  //undefined

在Sub中使用call去调用Super时，继承了Super的所有静态属性。在实例sub1、sub2中，各自对name的修改也互不影响，做到了属性不共享，同时子类的实例也能向超类型构造函数传参。而这种方式的缺点也显而易见：

  • 不能继承原型链方法：console.log(sub1.getSuper()) //Uncaught TypeError

3.组合继承

function Super(name) {
    this.name = name
}
Super.prototype.getSuper = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this, name);        //第二次调用
}
Sub.prototype = new Super();        //第一次调用
Sub.prototype.constructor = Sub;

var sub1 = new Sub("Tom");
console.log(sub1.getSuper()) //Tom
console.log(sub1.name)  //Tom
console.log(sub1 instanceof Sub)  //true
console.log(sub1 instanceof Super)   //true

var sub2 = new Sub();
console.log(sub2.name)  //undefined

在子类Sub中，我们仍然使用call去继承超类型的属性，同时也使用原型链的继承方式去继承原型链的方法和属性。这样我们弥补了以上两种继承方式的三种不足。唯一美中不足的是：

  • 调用了两次超类型的构造函数

第一次是在使用原型链继承Sub.prototype = new Super()时，调用了一次超类型构造函数，第二次是在实例化Sub new Sub()，然后在Sub内使用call方法时，又调用了一次超类型构造函数。并且在之后的每次实例化子类sub1、sub2...的过程中，都会调用超类型的构造函数，这种方式显然不是我们愿意看见的。

以上三种继承方式通属于函数式继承。

-------------------------------- 分界线 -----------------------------------

在没有必要兴师动众地创建构造函数，而只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。

什么是原型式继承呢？

4.原型式继承

先来看一个函数：

function object(o) {
    function F() { }
    F.prototype = o;
    return new F();
}

首先创造了一个临时的构造函数F，将F的原型指向传进来的对象，再返回F的实例。等等，是不是和原型链继承很类似？这样，我们就完成了一次对对象的浅拷贝。来看一个例子：

function object(o) {
    function F() { }
    F.prototype = o;
    return new F();
}

var person = {
    name: "Nicholas",
    friends: ["Sherlly", "Van"]
}


// 在传入一个参数的情况下，Object.create()和object()相同
// var people1 = Object.create(person);
var people1 = object(person);
people1.name = "Greg";
people1.friends.push("Rob")

var people2 = object(person);
people2.name = "Linda";
people2.friends.push("Barbie")

console.log(person.name)    //Nicholas
console.log(person.friends)    //["Sherlly", "Van", "Rob", "Barbie"]

原型式继承和原型链继承类似，区别是一个是对对象进行复制，另一个是对构造函数进行继承。缺点也是一致的：

  • 属性会被共享

5.寄生式继承

基于4，高级程序设计中还介绍了一种关于对象复制的方式：寄生式继承。实质是基于4的一层封装，来看下代码：

function object(o) {
    function F() { }
    F.prototype = o;
    return new F();
}

function createAnother(o) {
    var clone = object(o)
    clone.sayHi = function () {
        console.log("hi")
    }
    return clone;
}

var person = {
    name: "Nicholas",
    friends: ["Sherlly", "Van"]
}

var anotherPerson = createAnother(person);
anotherPerson.sayHi()

关于这段篇幅的介绍比较少，本质上就是说，可以通过这种方式实现子类方法sayHi的复用。通过createAnother创造出来的对象，都拥有sayHi方法。这种封装方式和工厂模式类似。

-------------------------------- 分界线 -----------------------------------

在前三种方法中，我们学会了对构造函数属性，和原型链上属性及方法的继承。唯一不足的是需要调用两次超类型的构造函数。在4、5方法中，我们学会了，对于对象的拷贝式继承。所以，是时候迎来我们的终极解决方案了：寄生组合式继承。

6.寄生组合式继承

思考一下，在方式3-组合继承中，如果我们需要优化一次调用，那一定是第一次调用，对于原型链继承的优化，怎么优化呢？方式4-原型式继承恰巧满足我们的需要。

Sub.prototype = new Super()，实质上就是完成一次对超类型原型对象的拷贝，看代码：

function object(o) {
    function F() { }
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType) {
    var clone = object(superType.prototype);    //复制超类型的原型对象
    clone.constructor = subType;        //将构造函数指向子类型
    subType.prototype = clone;
}

function Super(name) {
    this.name = name
}
Super.prototype.getSuper = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this, name);        //第二次调用
}

// 优化前：
// Sub.prototype = new Super();        //第一次调用
// Sub.prototype.constructor = Sub;
// 优化后：
inheritPrototype(Sub, Super);

var sub1 = new Sub("Tom");
console.log(sub1.getSuper()) //Tom
console.log(sub1.name)  //Tom
console.log(sub1 instanceof Sub)  //true
console.log(sub1 instanceof Super)   //true

var sub2 = new Sub();
console.log(sub2.name)  //undefined

我们封装了inheritPrototype这样一个函数，首先利用object（或Object.create()）复制出超类型的原型对象，然后将原型对象的构造函数指向自身（抄完了别忘了把名字改成自己的：clone.constructor = subType，constructor相当于一张身份证，身份证上的名字一定得是自己），最后将拷贝出来的对象塞给子类的原型对象。至此，完成了子类对超类型的原型对象的继承。

总结

让我们来总结一下，结合方式一的原型链继承和方式二的构造函数继承，衍生出方式三的组合继承。为了优化组合继承，引入了方式四原型式继承，最终得到方式六寄生组合式继承。这么理解，思路是不是清晰了很多？

-------------------------------- 完结 -----------------------------------

补充，有几个概念需要关注下，后续更新：

  • 构造函数、原型对象、实例三种关系

  • 拓展原型链的方法： new、Object.create、Object.setPrototypeOf、__ proto__

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