JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

最新推荐文章于 2024-07-09 11:27:52 发布
最新推荐文章于 2024-07-09 11:27:52 发布
阅读量734 收藏 1
点赞数
分类专栏： web

JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

作者：wuyuchang 字体：[增加 减小] 类型：转载 时间：2014-08-16 我要评论

这篇文章主要介绍了JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承,需要的朋友可以参考下
id="iframeu2261530_0" src="http://pos.baidu.com/kcrm?sz=680x200&rdid=2261530&dc=2&di=u2261530&dri=0&dis=0&dai=2&ps=0x0&coa=at%3D3%26rsi0%3D680%26rsi1%3D200%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1474861855132&ti=JavaScript%E7%BB%A7%E6%89%BF%E5%9F%BA%E7%A1%80%E8%AE%B2%E8%A7%A3(%E5%8E%9F%E5%9E%8B%E9%93%BE%E3%80%81%E5%80%9F%E7%94%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E3%80%81%E6%B7%B7%E5%90%88%E6%A8%A1%E5%BC%8F%E3%80%81%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF%E3%80%81%E5%AF%84%E7%94%9F%E5%BC%8F%E7%BB%A7%E6%89%BF%E3%80%81%E5%AF%84%E7%94%9F%E7%BB%84%E5%90%88%E5%BC%8F%E7%BB%A7%E6%89%BF)_javasc&ari=2&dbv=2&drs=1&pcs=1347x638&pss=1347x6349&cfv=0&cpl=6&chi=1&cce=true&cec=GBK&tlm=1473124336&rw=638&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F53824.htm&ltr=http%3A%2F%2Fwww.jb51.net%2Farticle%2F55540.htm&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=8&col=zh-CN&cdo=-1&tcn=1474861856&qn=84a5a8f34388a294&tt=1474861855008.1182.1183.1186" width="680" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

说好的讲解JavaScript继承，可是迟迟到现在讲解。废话不多说，直接进入正题。

　　既然你想了解继承，证明你对JavaScript面向对象已经有一定的了解，如还有什么不理解的可以参考《面向对象JS基础讲解，工厂模式、构造函数模式、原型模式、混合模式、动态原型模式》，接下来讲一般通过那些方法完成JavaScript的继承。

　　原型链

　　JavaScript中实现继承最简单的方式就是使用原型链，将子类型的原型指向父类型的实例即可，即“子类型.prototype = new 父类型();”，实现方法如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 为父类型创建构造函数
function SuperType() {
   this .name = [ 'wuyuchang' , 'Jack' , 'Tim' ];
   this .property = true ;
}
 
// 为父类型添加方法
SuperType.prototype.getSuerperValue = function () {
   return this .property;
}
 
// 为子类型创建构造函数
function SubType() {
   this .test = [ 'h1' , 'h2' , 'h3' , 'h4' ];
   this .subproperty = false ;
}
 
// 实现继承的关键步骤，子类型的原型指向父类型的实例
SubType.prototype = new SuperType();
 
// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function () {
   return this .subproperty;
}
 
 
/* 以下为测试代码示例 */
var instance1 = new SubType();
instance1.name.push( 'wyc' );
instance1.test.push( 'h5' );
alert(instance1.getSuerperValue());    // true
alert(instance1.getSubValue());      // false
alert(instance1.name);          // wuyuchang,Jack,Tim,wyc
alert(instance1.test);          // h1,h2,h3,h4,h5
 
 
var instance2 = new SubType();
alert(instance2.name);          // wuyuchang,Jack,Tim,wyc
alert(instance2.test);          // h1,h2,h3,h4

可以看到如上的代码就是通过原型链实现的一个简单的继承，但看到测试代码示例中还是存在些问题。相信看了我的博文《面向对象JS基础讲解，工厂模式、构造函数模式、原型模式、混合模式、动态原型模式》的童鞋一定知道原型链代码存在的第一个问题是由于子类型的原型是父类型的实例，也就是子类型的原型中包含的父类型的属性，从而导致引用类型值的原型属性会被所有实例所共享。以上代码的instance1.name.push('wyc');就可以证明此问题的存在。而原型链的第二个问题就是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。因此我们在实际开发中，很少单独使用原型链。 

 　　借用构造函数

　　为了解决原型链中存在的两个问题，开发人员开始使用一种叫做借用构造函数的技术来解决原型链中存在的问题。这种技术的实现思路也挺简单，只需要在子类型的构造函数内调用父类型的构造函数即可。别忘了，函数只不过是在特定环境中执行代码的对象，因此可以通过apply()或call()方法执行构造函数。代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 为父类型创建构造函数
function SuperType(name) {
   this .name = name;
   this .color = [ 'pink' , 'yellow' ];
   this .property = true ;
 
   this .testFun = function () {
     alert( 'http://tools.jb51.net/' );
   }
}
 
// 为父类型添加方法
SuperType.prototype.getSuerperValue = function () {
   return this .property;
}
 
// 为子类型创建构造函数
function SubType(name) {
   SuperType.call( this , name);
   this .test = [ 'h1' , 'h2' , 'h3' , 'h4' ];
   this .subproperty = false ;
}
 
// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function () {
   return this .subproperty;
}
 
 
/* 以下为测试代码示例 */
var instance1 = new SubType([ 'wuyuchang' , 'Jack' , 'Nick' ]);
instance1.name.push( 'hello' );
instance1.test.push( 'h5' );
instance1.color.push( 'blue' );
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
// alert(instance1.getSuerperValue());    // error 报错
alert(instance1.test);            // h1,h2,h3,h4,h5   
alert(instance1.getSubValue());        // false   
alert(instance1.color);            // pink,yellow,blue
 
var instance2 = new SubType( 'wyc' );
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc   
// alert(instance2.getSuerperValue());    // error 报错
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

可以看到以上代码中子类型SubType的构造函数内通过调用父类型"SuperType.call(this, name);"，从而实现了属性的继承，也可以在子类型创建实例的时候为父类型传递参数了，但新的问题又来了。可以看到我在父类型的构造函数中定义了一个方法：testFun，在父类型的原型中定义了一个方法：getSuperValue。可是在实例化子类型后仍然是无法调用父类型的原型中定义的方法getSuperValue，只能调用父类型中构造函数的方法：testFun。这就同创建对象中只使用构造函数模式一样，使得函数没有复用性可言。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

组合继承（原型链+借用构造函数）

　　顾名思义，组合继承就是结合使用原型链与借用构造函数的优点，组合而成的一个模式。实现也很简单，既然是结合，那当然结合了两方的优点，即原型链继承方法，而在构造函数继承属性。具体代码实现如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 为父类型创建构造函数
function SuperType(name) {
   this .name = name;
   this .color = [ 'pink' , 'yellow' ];
   this .property = true ;
 
   this .testFun = function () {
     alert( 'http://tools.jb51.net/' );
   }
}
 
// 为父类型添加方法
SuperType.prototype.getSuerperValue = function () {
   return this .property;
}
 
// 为子类型创建构造函数
function SubType(name) {
   SuperType.call( this , name);
   this .test = [ 'h1' , 'h2' , 'h3' , 'h4' ];
   this .subproperty = false ;
}
 
SubType.prototype = new SuperType();
 
// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function () {
   return this .subproperty;
}
 
 
/* 以下为测试代码示例 */
var instance1 = new SubType([ 'wuyuchang' , 'Jack' , 'Nick' ]);
instance1.name.push( 'hello' );
instance1.test.push( 'h5' );
instance1.color.push( 'blue' );
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
alert(instance1.getSuerperValue());      // true
alert(instance1.test);            // h1,h2,h3,h4,h5   
alert(instance1.getSubValue());        // false   
alert(instance1.color);            // pink,yellow,blue
 
var instance2 = new SubType( 'wyc' );
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc   
alert(instance2.getSuerperValue());      // true
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

以上代码通过SuperType.call(this, name);继承父类型的属性，通过SubType.prototype = new SuperType();继承父类型的方法。以上代码很方便的解决了原型链与借用构造函数所遇到的问题，成为了JavaScript中最为常用的实例继承的方法。但混合模式也并非没有缺点，可以看到在以上代码中在继承方法的时候实际已经继承了父类型的属性，只不过此时对于引用类型属于共享的，因此在子类型的构造函数内在次调用父类型的构造函数从而继承了父类型的属性而去覆盖了原型中所继承的属性，这样调用两次构造函数显然没有必要，但有什么方法可以解决呢？在解决此问题时先看以下两个模式。

原型式继承

　　原型式继承的的实现方法与普通继承的实现方法不同，原型式继承并没有使用严格意义上的构造函数，而是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。具体代码如下：

?
1
2
3
4
5
function object(o) {
   function F() {}
   F.prototype = o;
   return new F();
}

代码示例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 原型式继承 */
function object(o) {
   function F() {}
   F.prototype = o;
   return new F();
}
 
var person = {
   name : 'wuyuchang' ,
   friends : [ 'wyc' , 'Nicholas' , 'Tim' ]
}
 
var anotherPerson = object(person);
anotherPerson.name = 'Greg' ;
anotherPerson.friends.push( 'Bob' );
 
var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack' ;
anotherPerson2.friends.push( 'Rose' );
 
alert(person.friends);  // wyc,Nicholas,Tim,Bob,Rose

寄生式继承

?
1
2
3
4
5
6
7
8
/* 寄生式继承 */
function createAnother(original) {
   var clone = object(original);
   clone.sayHi = function () {
     alert( 'hi' );
   }
   return clone;
}

使用示例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 原型式继承 */
function object(o) {
   function F() {}
   F.prototype = o;
   return new F();
}
    
/* 寄生式继承 */
function createAnother(original) {
   var clone = object(original);
   clone.sayHi = function () {
     alert( 'hi' );
   }
   return clone;
}
 
var person = {
   name : 'wuyuchang' ,
   friends : [ 'wyc' , 'Nicholas' , 'Rose' ]
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

寄生组合式继承

　　前面说过了JavaScrip中组合模式实现继承的缺点，现在我们就来解决它的缺点，实现思路是，对于构造函数继承属性，而原型链的混成形式继承方法，即不用在继承方法的时候实例化父类型的构造函数。代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
function object(o) {
   function F() {}
   F.prototype = o;
   return new F();
}
 
/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
   var prototype = object(superType.prototype);
   prototype.constructor = subType;
   subType.prototype = prototype;
}

而在使用时只需要将组合模式中的“SubType.prototype = new SuperType();”这行代码替换成inheritPrototype(subType, superType);即可。寄生组合式继承的高效率体现在它只调用了一次父类型构造函数，避免了创建不必要的或多余的属性。与此同时，原型链还能保持不变，因此，还能够正常使用instanceof和isPrototypeof()。这也是目前来说最理想的继承方式了，目前也在向这种模式转型。（YUI也使用了这种模式。）

此博文参考《JavaScript高级程序设计第3版》，代码为经过改写，更具体，并加了注释使大家更易懂。如对JS继承方面有独到见解的童鞋不别吝啬，回复您的见解供大家参考！

您可能感兴趣的文章:
jfkidear
关注
专栏目录
JavaScript寄生组合式继承实例详解
10-18
JavaScript寄生组合式继承是一种在JavaScript中实现类继承的高级技巧，它结合了原型链继承和构造函数继承的优点，同时避免了它们的一些缺点。以下是对这种继承模式的详细解析。 1. **原型链继承**： 在JavaScript...
JavaScript寄生组合式继承原理与用法分析
10-17
组合式继承（也称为伪经典继承）是通过借用构造函数（call或apply方法）来继承属性，同时通过原型链实现对方法的继承。这种方法虽然解决了大部分问题，但有一个缺陷：在创建子类型的原型时会调用一次父类型的构造...
一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends...
weixin_34217773的博客
07-23 188
免费帮忙内推阿里等各大IT公司的岗位，有兴趣可以带简历加微信angeltune 说实在话，以前我只需要知道“寄生组合继承”是最好的，有个祖传代码模版用就行。最近因为一些事情，几个星期以来一直心心念念想整理出来。本文以《JavaScript高级程序设计》上的内容为骨架，补充了ES6 Class的相关内容，从我认为更容易理解的角度将继承这件事...
5种JS原型继承方式总结，你了解几种？
最新发布
前端探索者
07-09 541
js有几种经典的继承方式。比如原型链继承、构造函数继承、组合继承、寄生组合继承、ES6继承。让我们一一分析并实现。同时了解每种方案的优缺点。其实js的继承本质上是通过原型链机制实现的扩展。不管是哪种继承方式，都是通过操作父类原型链和子类原型链形成关联关系实现的。只是不同实现中需要考虑不同的问题。在实际项目开发中，建议尽可能使用ES6的class extends实现。其他实现方式主要是理解背后的原理和思想。
JavaScript继承
m0_61480985的博客
11-28 1663
寄生组合继承存在效率问题，最主要的效率问题是父类构造函数始终被调用两次，一次是在创建子类原型时调用，另一次是在子类构造函数中调用，本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行的时候重写自己的原型就可以了。把子类的原型对象指向父类，就能使用父类中的方法和属性了。采用原型式继承不自定义类型，临时创建一个构造函数，借助已有的对象作为临时构造函数的原型，然后在此基础实例化对象，并返回。继承就是指一个子类继承父类的属性和方法，使得子类对象（实例化对象）具有父类的方法和属性。
JavaScript的继承
weixin_51938823的博客
07-12 143
在JS中有原型继承、构造函数继承、组合继承等。
浅谈JS继承_寄生式继承 & 寄生组合式继承
10-21
为了解决这个问题，寄生组合式继承提出了一个改进方案：通过借用构造函数来继承属性，通过原型链来继承方法。具体做法是创建一个超类型原型的副本，而不是直接设置子类型的原型为超类型的实例。这样可以避免在子类型...
javascript中的继承
qq_47542732的博客
05-04 216
javascript中的几种继承方式原型链继承断开原型链借用构造函数组合式继承 原型链继承 es6中提出了原型链的概念，原型链也成为js中实现继承的一种主要手段，其实现原理主要实现方式如一下代码所示： Object.prototype.age = '20' function Gradefather () { this.property = true } Gradefather.prototype.get = function () { console.log('曾祖父的get方法') } funct
JavaScript中的继承
qq_45941368的博客
06-19 509
需要根据具体的需求和情况来选择适合的继承方式，构造函数继承在某些场景下可能更适合，特别是需要独立的属性和方法，并且需要传递参数或实现多继承的情况。结合了原型链继承和构造函数继承的优点：通过原型链继承，可以实现属性和方法的复用；需要根据具体的需求和情况来选择适合的继承方式，组合继承在大多数情况下是一种常用且灵活的继承模式，能够较好地解决原型链继承和构造函数继承的问题。子类与父类的原型链相互独立：子类对象的原型既包含父类构造函数的原型，也包含子类特有的属性和方法，可以实现对父类原型上方法的重写和扩展。
JavaScript中的继承！
Sapling
03-27 677
有继承,必定会有两个构造函数,一个是父类,一个是子类,只有这样才能发生继承关系。话不多说直接进入主题。 这里先声明一个父类Person, 下面的继承均继承于这里的Person父类。 function Person(name){ this.name = name || 'person' this.eat = function(){ console.log('this is eat'); }...
JavaScript实现继承
忆雨星域
09-03 746
继承 继承的方式有两种，一种是接口继承，继承方法签名，一种是实现继承，继承实际的方法。JavaScript由于没有方法签名，所以只支持实现继承 原型链 JavaScript实现继承的方式是用原型链来实现的。由于每个构造函数都一个属性，指向一个原型对象，所以我们将原型对象等于另一个类型的实例，显然这时这个实例中有一个指向另一个原型的指针。如果这样一层一层的嵌套下去，就构成一个原型链。 ...
javaScript的继承方式
weixin_49847397的博客
04-16 402
1.原型继承 特点：将父类的私有+公有作为子类的共有 将子类的原型指向父类的实例 给B的prototype属性重新赋值为a这个对象，B的原型就是a这个对象 //原型模式 将公有的属性加到prorotype上 Student.prototype.introduce = function(){ console.log("我叫" + this.name + "我今年" + this.age + ",我来学习js啦"); } va
JavaScript中的继承（最全版）
Fighting0923的博客
04-05 211
为了把公共的内容提取出来变成更加公共的内容 为了让所有的类都能使用
详细讲解JavaScript继承
L1780105381的博客
02-27 576
JavaScript继承的常见四种方式（包含ES6） 四种继承方式 构造函数 原型链 构造函数+原型链 ES6类实现继承 构造函数实现继承 function Parent(){ this.name = "Parent" } function Child(){ Parent.call(this) this.type = "child的属性" } console.log(new Child) 在子类构造函数中写了Parent.call(this)指让Parent的构造函数在Chi
JavaScript继承全解析：原型链、构造函数、混合与寄生模式
本文主要介绍了JavaScript中的继承机制，包括原型链、借用构造函数、混合模式、原型式继承、寄生式继承以及寄生组合式继承等六种方式。作者建议在阅读本文之前，最好先对JavaScript面向对象的基础有所了解。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值