JavaScript 继承机制小节

写在前面

推荐大家先看一下这篇文章的姊妹篇JavaScript创建对象的四种常见模式

这个抄书笔记在介绍四个模式时，也或多或少的解释了一下原型链的概念，话不多说，开始本篇文章。

原型链

基于原型链的继承

JavaScript将原型链作为实现继承的主要方式。基本思想是利用原型让一个引用类型，继承另外一个引用类型的属性和方法。关于构造函数、实例和原型的关系就不在赘述了，参见下图（这个图是目前对三者关系总结最棒的图了~）：

原型链示意图

那么想一下，如果让原型对象等于另一个类型的实例呢？结果会怎样，显然，此时的原型对象将会包含一个指向另一个原型的指针，相应的，另一个原型中也包含了一个指向另一个构造函数的指针。假如另一个原型又指向了第三个原型的实例，那么上述关系依然成立，层层推进，就构成了实例与原型的链条，这就是所谓原型链的基本概念，上面那张关系图的基础上无限延展~

实现原型链有一个基本的模式，代码如下：

function SuperType(){  
    this.property = true;  
}  
  
SuperType.prototype.getSuperValue = function(){  
    return this.property;  
};  
  
function SubType(){  
    this.subProperty = false;  
}  
  
//让SubType的原型指向SuperType的原型，从而继承了SuperType
SubType.prototype = new SuperType();
  
SubType.prototype.getSubValue=function(){  
    return this.subProperty;  
}  

var instance = new SubType();
console.log(instance.getSuperValue());//true

上面代码演示的是SubType对SuperType的继承。基本原理是通过创建SubType的实例，并将该实例赋值为SuperType.prototype，本质是重写原型对象。下面这张图，描述了他们之间的关系

在上文中，我们没有使用SubType默认提供的原型，而是换成了SuperType的实例。于是新原型不仅具有作为一个SuperType实例所拥有的全部属性和方法，而且其内部还有一个指针，指向SuperType的原型。最终结果就是这个样子：instance指向SubType的原型，SubType的原型又指向了SuperType的原型。getSuperValue()方法还在SuperType.prototype中，但是property属性则位于SubType.prototype中（因为SubType.prototype是SuperType.prototype的实例，所以享有这个属性）。

搜索的经历三个步骤：
1）搜索实例对象Instance
2）搜索SubType.prototype
3）搜索SuperType.prototype

注意此时instance的constructor属性现在指向了SuperType（正常应该指向构造函数SubType，但是在实例化SubType之前原来的SubType.prototype中的指向了SuperType的原型，而SuperType原型的constructor属性又指向SuperType，，，好绕啊。。。）

注意事项：

修改原型对象的属性时，那么所有的实例通过原型链都会访问到更改后的属性；但是如果将原型对象设置为其他值Person.prototype = {},那么原来的实例和原来的原型对象的关系没有变化，原有实例还拥有原来原型对象的属性。也就是说：直接修改prototype属性不会影响已经创建的属性，影响的将是新创建的实例，这里经常会出笔试题。

子类型有时候要重写超类型中的某个方法，或者需要添加超类型中不存在的方法时。不管怎样，给原型添加方法的代码一定要放在替换原型代码之后。

通过原型链实现继承，不能使用对象字面量来创建原型，因为这样会重写原型链

首先我们先来看看正常情况下的代码结构

function SuperType(){  
    this.property = true;  
}  
  
SuperType.prototype.getSuperValue = function(){  
    return this.property;  
};  
  
function SubType(){  
    this.subProperty = false;  
}  
  
//让SubType的原型指向SuperType的原型，从而继承了SuperType
SubType.prototype = new SuperType();
  
SubType.prototype.getSubValue = function(){
    return this.subProperty;  
},
SubType.prototype.someOtherMehtod = function() {
    return false;     
}

var instance = new SubType();
console.log(instance)
console.log(instance.getSuperValue());//true

这段代码我们打印一下Instance来看一下继承关系

然后我们将prototype设置成字面量形式，比如下面的示例

function SuperType(){  
    this.property = true;  
}  
  
SuperType.prototype.getSuperValue = function(){  
    return this.property;  
};  
  
function SubType(){  
    this.subProperty = false;  
}  
  
//让SubType的原型指向SuperType的原型，从而继承了SuperType
SubType.prototype = new SuperType();
  
SubType.prototype = {
    getSubValue: function(){  
        return this.subProperty;  
    },
    someOtherMehtod: function() {
        return false;
    }      
}

var instance = new SubType();
console.log(instance.getSuperValue());//error

这段代码我们打印一下Instance的继承关系

原型链继承的问题

最主要的问题还是来自包含引用类型值的问题。上一篇文章中介绍过包含引用类型值的原型属性会被所有实例共享，而这也是为什么在构造函数中而不是在原型中定义属性的原因。在上面的例子中如果在SuperType中定义一个引用类型，如数组属性，那么每个SubType.prototype（SuperType的实例）都将拥有一个引用类型属性，那么每个instance都会共享这个引用属性，一个实例修改了这个属性，会影响到其他事例。

function SuperType(){  
     this.property = true;  
     this.colors=['red','blue','green'];  
 }  
  
 SuperType.prototype.getSuperValue = function(){  
     return this.property;  
 };  
  
 function SubType(){  
     this.subProperty = false;  
 }  
  
 SubType.prototype = new SuperType();  
  
 SubType.prototype.getSubValue = function(){  
     return this.subProperty;  
 }  
  
 var sub1 = new SubType();  
 sub1.colors.push('yellow');  
 var sub2 = new SubType();  
 console.log(sub2.colors);//["red", "blue", "green", "yellow"]

其次，创建子类型实例的时候，不能向超类型的构造函数中传递参数

所以，很少有人单独使用原型链，所以就有了下面的方式。

借用构造函数

借用构造函数完善原型链继承

为了解决原型中包含引用类型值所带来的问题，开发人员开始使用一种叫做借用构造函数的技术（或叫经典继承）主要思路是：子类型构造函数中调用超类型的构造函数，使实例拥有自己独有的属性

function SuperType(){  
    this.colors = ['red','blue','green'];  
}  
  
function SubType(){  
    //继承了SuperType
    SuperType.call(this); 
}  
  
var sub1 = new SubType();  
sub1.colors.push('yellow');  
console.log(sub2.colors);//["red", "blue", "green", "yellow"]  

var sub2 = new SubType();  
console.log(sub2.colors);//["red", "blue", "green"]

这样在子类的构造函数中调用父类的构造函数，这样的写法实际上是在(未来将要)新创建的SubType实例环境下调用了SuperType构造函数，这样一来，就会在新SubType对象上执行SuperType()函数中定义的对象初始化代码，Subtype的每个实例就会有自己的colors副本了。

这样做还多了个好处，可以传递参数了

function SuperType(name){  
    this.property = name;  
}  
  
function SubType(name){  
    SuperType.call(this,'Nichllas');  
    //实例属性
    this.age = 29
}  
  
var sub1 = new SubType();  
console.log(sub1.name);//Nichllas  
console.log(sub1.age);//29

存在的问题

无法避免构造函数模式存在的问题--方法都在构造函数中定义，因此函数服用无从谈起，下面介绍一种最常用的继承方式

组合继承

又称伪经典继承，指的是将原型链和借用构造函数的技术组合到一起。其背后的思路是使用原型链实现对原型方法和属性的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能保证每个实例都有自己的方属性，看下面的例子：

function SuperType(name){  
    this.name = name;  
    this.colors = ['red','blue','green'];  
}  
  
SuperType.prototype.sayName = function(){  
    console.log(this.name)
};  
  
function SubType(name,age){  
    SuperType.call(this,name); 
    this.age = age; 
}  
//继承方法
SubType.prototype = new SuperType();   
  
SubType.prototype.sayAge = function(){  
    console.log(this.age); 
}  
  
var instance1 = new SubType('Nichloas', 29);
instance1.colors.push('black');  
console.log(instance1.colors);//red,blue,green,black
instance1.sayName();//Nichloas
instance1.sayAge();//29

var instance2 = new SubType('Grep', 27);
console.log(instance2.colors);//red,blue,green
instance2.sayName();//Grep
instance2.sayAge();//27

推荐文章

这里为大家搜集了一些高质量的博文，希望大家能有所收获

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

推荐阅读更多精彩内容