JS继承——原型链_蓝瞳_前端开发者

许多OO语言支持两种继承:接口继承实现继承。ECMAScript只支持实现继承,且继承实现主要依赖原型链实现。

接口继承实现继承

原型链

原型链原型链

基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法。

基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系:每个构造函数均有一个原型对象,原型对象均包含一个指向构造函数的指针,实例均包含一个指向原型对象的内部指针。若让原型对象等于另一个类型的实例,此时原型对象将包含一个指向 另一个原型的指针,相应地,另一个原型中也包含一个指向另一个构造函数的指针。若另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。

原型链基本模式,示例代码如下:

原型链基本模式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>原型链-继承</title>
 5     <script type="text/javascript">        
 6         function Supertype(){
 7             this.property=true;//propertype属于Supertype实例属性
 8         }
 9 
10         Supertype.prototype.getSuperValue=function(){//getSuperValue()属于原型方法
11             return this.property;
12         };//至此,Supertype原型包含指向Supertype构造函数的constructor属性和getSuperValue()方法。
13 
14         function Subtype(){
15             this.subproperty=false;//subproperty属于Subtype实例属性
16         }
17 
18         //继承了Supertype,重写了原型对象
19         Subtype.prototype=new Supertype();
20 
21         //添加新方法
22         Subtype.prototype.getSubValue=function(){//为Subtype原型添加方法getSubValue()
23             return this.subproperty;
24         }//至此,Subtype原型模型中包含属性和方法为:内部属性[prototype]、property属性、getSuperValue()方法。作为一个Supertype类型的实例,其内部属性[prototype]指向Supertype原型,实例属性property。
25 
26         //重写超类中的方法,因此需要谨慎地定义方法
27         Subtype.prototype.getSuperValue=function(){
28             return false;
29         }
30 
31         var instance=new Subtype();//实例内部属性[prototype]指向Subtype原型;且包含实例属性subproperty
32         alert(instance.getSuperValue());//在重写超类函数之前返回true;重写了超累函数之后返回false
33 
34         //确定原型和实例的关系
35         alert(instance instanceof Object);//true
36         alert(instance instanceof Supertype);//true
37         alert(instance instanceof Subtype);//true
38 
39         alert(Object.prototype.isPrototypeOf(instance));//true
40         alert(Supertype.prototype.isPrototypeOf(instance));//true
41         alert(Subtype.prototype.isPrototypeOf(instance));//true
42     </script>
43 </head>
44 <body>
45 </body>
46 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>原型链-继承</title>
 5     <script type="text/javascript">        
 6         function Supertype(){
 7             this.property=true;//propertype属于Supertype实例属性
 8         }
 9 
10         Supertype.prototype.getSuperValue=function(){//getSuperValue()属于原型方法
11             return this.property;
12         };//至此,Supertype原型包含指向Supertype构造函数的constructor属性和getSuperValue()方法。
13 
14         function Subtype(){
15             this.subproperty=false;//subproperty属于Subtype实例属性
16         }
17 
18         //继承了Supertype,重写了原型对象
19         Subtype.prototype=new Supertype();
20 
21         //添加新方法
22         Subtype.prototype.getSubValue=function(){//为Subtype原型添加方法getSubValue()
23             return this.subproperty;
24         }//至此,Subtype原型模型中包含属性和方法为:内部属性[prototype]、property属性、getSuperValue()方法。作为一个Supertype类型的实例,其内部属性[prototype]指向Supertype原型,实例属性property。
25 
26         //重写超类中的方法,因此需要谨慎地定义方法
27         Subtype.prototype.getSuperValue=function(){
28             return false;
29         }
30 
31         var instance=new Subtype();//实例内部属性[prototype]指向Subtype原型;且包含实例属性subproperty
32         alert(instance.getSuperValue());//在重写超类函数之前返回true;重写了超累函数之后返回false
33 
34         //确定原型和实例的关系
35         alert(instance instanceof Object);//true
36         alert(instance instanceof Supertype);//true
37         alert(instance instanceof Subtype);//true
38 
39         alert(Object.prototype.isPrototypeOf(instance));//true
40         alert(Supertype.prototype.isPrototypeOf(instance));//true
41         alert(Subtype.prototype.isPrototypeOf(instance));//true
42     </script>
43 </head>
44 <body>
45 </body>
46 </html>

1 2 3 4 5 6function Supertype(){
7thistrue//propertype属于Supertype实例属性 8 }
910function//getSuperValue()属于原型方法11returnthis.property;
12//至此,Supertype原型包含指向Supertype构造函数的constructor属性和getSuperValue()方法。1314function Subtype(){
15thisfalse//subproperty属于Subtype实例属性16 }
1718//继承了Supertype,重写了原型对象19new Supertype();
2021//添加新方法22function//为Subtype原型添加方法getSubValue()23returnthis.subproperty;
24//至此,Subtype原型模型中包含属性和方法为:内部属性[prototype]、property属性、getSuperValue()方法。作为一个Supertype类型的实例,其内部属性[prototype]指向Supertype原型,实例属性property。2526//重写超类中的方法,因此需要谨慎地定义方法//重写超类中的方法,因此需要谨慎地定义方法27Subtype.prototype.getSuperValue=function(){
function(){
28 return false;
returnfalse;
29 }
}
3031varnew//实例内部属性[prototype]指向Subtype原型;且包含实例属性subproperty32//在重写超类函数之前返回true;重写了超累函数之后返回false3334//确定原型和实例的关系35instanceof//true36instanceof//true37instanceof//true3839//true40//true41//true4243444546

原型链的问题:
(1)原型链子类实例共享父类引用类型,同原型模型的问题一样。

原型链的问题:

(2)在创建子类的实例时,不能在不影响所有对象实例的情况下,向超类型的构造函数传递参数

因此,实践中很少单独使用原型链。

文章内容部分摘自《JavaScript高级程序设计(第3版)》

» 本文来自:前端开发者 » 《JS继承——原型链_蓝瞳_前端开发者》
» 本文链接地址:https://www.rokub.com/73260.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!