JavaScript里继承的实现

比眉伴天荒 2021-12-17 05:29 263阅读 0赞

真正的面向对象语言必须支持继承机制，即一个类能够重用（继承）另一个类的方法和属性，在上一篇文章里介绍了 [javascript 里的类实现][javascript] ，这里介绍下继承的实现。  
JavaScript里的继承机制并不是明确规定的，而是通过模仿实现的。  
一：对象冒充(object masquerading)  
对象冒充是如何在函数环境中使用this关键字后发展起来的，其原理如下：构造函数使用this关键字给所有的属性和方法赋值(采用类声明的构造函数方式)。因为构造函数只是一个函数，所以可以使用ClassA的构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。

![None.gif][] function  ClassA(sColor)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] this .color  =  sColor;  
![InBlock.gif][] this .sayColor  =  function ()  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .color);  
![ExpandedSubBlockEnd.gif][] \} ;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][] function  ClassB(sColor)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] this .newMethord =  ClassA;  
![InBlock.gif][] this .newMethod(sColor);  
![InBlock.gif][] delete  this .newMethod;  
![ExpandedBlockEnd.gif][]\}

上面的代码中ClassA赋予了方法newMethod(函数只是指向它的指针)。然后调用了该方法，传递给它的是ClassB的构造函数的参数sColor。最后的代码删除了对ClassA的引用，这样以后就不能再调用它了，所有的新属性和新方法都必须在删除了新方法的代码行后定义，否在会覆盖超类的相关属性和方法：

![None.gif][] function  ClassB(sColor,sName)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] this .newMethor  =  ClassA;  
![InBlock.gif][] this .newMethor(sColor);  
![InBlock.gif][] delete  this .newMethor;  
![InBlock.gif][]  
![InBlock.gif][] this .name  =  sName;  
![InBlock.gif][] this .sayName  =  function ()  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .name);  
![ExpandedSubBlockEnd.gif][] \} ;  
![ExpandedBlockEnd.gif][]\}

二：call()方法  
call()方法是与经典的对象冒充方法最相似的方法，它的第一个参数用作this的对象，其它参数都直接传递给函数自身，如：

![None.gif][] function  sayColor(sPrefix,sSuffix)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert(sPrefix  \+  this .color  \+  sSuffix);  
![ExpandedBlockEnd.gif][]\}   
![None.gif][] var  obj  =  new  object();  
![None.gif][]obj.color  =  " red " ;  
![None.gif][]sayColor.call(obj, " The color is  " , " , a very nice color indeed. " );  
![None.gif][] // outputs "The color is red, a very nice color indeed."

在上面的例子里，函数sayColor()在对象外定义，即使它不属于任何对象，也可以引用关键字this,对象obj的color属性等于"red"，调用call()方法时对一个参数是obj，说明应赋予sayColor()函数中的this关键字是obj,要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值，调用和删除代码替换：

![None.gif][] function  ClassB(sColor,sName)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] //  this.newMethor = ClassA;   
![InBlock.gif][]//  this.newMethor(sColor);   
![InBlock.gif][]//  delete this.newMethor;   
![InBlock.gif][]  ClassA.call( this ,sColor);  
![InBlock.gif][]  
![InBlock.gif][] this .name  =  sName;  
![InBlock.gif][] this .sayName  =  function ()  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .name);  
![ExpandedSubBlockEnd.gif][] \} ;  
![ExpandedBlockEnd.gif][]\}

三：apply()方法  
apply()方法有二个参数，用作this的对象和要传递给函数的参数数组，列如：

![None.gif][] function  sayColor(sPrefix,sSuffix)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert(sPrefix  \+  this .color  \+  sSuffix);  
![ExpandedBlockEnd.gif][]\}   
![None.gif][] var  obj  =  new  object();  
![None.gif][]obj.color  =  " red " ;  
![None.gif][]sayColor.apply(obj, new  Array( " The color is  " , " , a very nice color indeed. " ));  
![None.gif][] // outputs "The color is red, a very nice color indeed."

四：原型链  
prototype对象是个模板，要实例化的对象都以这个模板为基础，prototype对象的任何属性和方法都被传递给那个类的所有实例，原型链用这种功能实现继承机制：

![None.gif][] function  ClassA()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]ClassA.prototype.color  =  " red " ;  
![None.gif][]ClassA.prototype.sayColor  =  function ()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .color);  
![ExpandedBlockEnd.gif][]\} ;  
![None.gif][]  
![None.gif][] function  ClassB()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]ClassB.prototype  =  new  ClassA();

ClassB.prototype = new ClassA(); 这句把ClassB的prototype属性设置为ClassA的实例，与对象冒充相似，子类的所有属性和方法都必须出现在prototype属性被赋值后，因为在它之前所有的方法都会被删除，因为prototype属性被替换成了新的对象，添加了新的原始对象将被销毁，所以，为ClassB类添加name属性和sayName()方法的代码如下：

![None.gif][] function  ClassB()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]ClassB.prototype  =  new  ClassA();  
![None.gif][]  
![None.gif][]ClassB.prototype.name  =  "" ;  
![None.gif][]ClassB.prototype.sayName  =  function ()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .name);  
![ExpandedBlockEnd.gif][]\} ;

五：混合方式  
这种方式使用构造函数定义类，并未使用任何原型。重写前面的例子，代码如下：

![None.gif][] function  ClassA(sColor)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] this .color  =  sColor;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]ClassA.prototype.sayColor  =  function ()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .color);  
![ExpandedBlockEnd.gif][]\} ;  
![None.gif][] function  ClassB(sColor,sName)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] ClassA.call( this ,sColor);  
![InBlock.gif][] this .name  =  sName;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]ClassB.prototype  =  new  ClassA();  
![None.gif][]ClassB.prototype.sayName  =  function ()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
![InBlock.gif][] alert( this .name);  
![ExpandedBlockEnd.gif][]\}

TrackBack： [http://www.cnblogs.com/doll-net/archive/2007/05/26/760305.html][http_www.cnblogs.com_doll-net_archive_2007_05_26_760305.html]

转载于:https://www.cnblogs.com/hdjjun/archive/2008/06/17/1223749.html

[javascript]: http://www.cnblogs.com/doll-net/archive/2007/05/18/751811.html
[None.gif]: /images/20211217/5006d77d4ab24b4982c6294170b2c814.png
[ExpandedBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: /images/20211217/03a9fc6c9e234b8db64261013c91b19a.png
[InBlock.gif]: /images/20211217/f355a6e023ee42f58a0810dc0b60bd08.png
[ExpandedSubBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif
[ExpandedSubBlockEnd.gif]: /images/20211217/b8985c8226be432aabb78bc2561c6f93.png
[ExpandedBlockEnd.gif]: /images/20211217/efea40d3fb6c4209b3ffb3b500ac9e6a.png
[http_www.cnblogs.com_doll-net_archive_2007_05_26_760305.html]: http://www.cnblogs.com/doll-net/archive/2007/05/26/760305.html