javascript继承模型

秒速五厘米 2022-09-19 15:18 113阅读 0赞

前面介绍了javascript的对象模型,这里接着介绍javascript的继承模型,继承模型与对象模型相似,都不是java语言里面的那种语言内部的对象和继承,而是程序员依靠javascript的引用模型自己构造出来的与java语言里面的对象和继承在感官方面,使用方面,功能方面相似的一个效果.

**这里着重提一下:**

**javascript除了五种基本类型外,其它类型全是引用类型,"引用"这个概念在这篇和上一篇"javascript对象模型"中起着非常重要的作用,一定要明确知道什么是引用类型.**

下面我们开始:

javascript继承模型可由三个方式实现:

1.对象冒充

a.直接实现  例:

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] function  ClassA(sColor)  ... \{  
![InBlock.gif][]    this.color = sColor;  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    this.sayColor = function () ...\{  
![InBlock.gif][]        alert(this.color);  
![ExpandedSubBlockEnd.gif][]    \};  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  ClassB(sColor, sName)  ... \{  
![InBlock.gif][]    this.newMethod = ClassA;  
![InBlock.gif][]    this.newMethod(sColor);  
![InBlock.gif][]    delete this.newMethod;  
![InBlock.gif][]      
![InBlock.gif][]    this.name = sName;  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    this.sayName = function () ...\{  
![InBlock.gif][]        alert(this.name);  
![ExpandedSubBlockEnd.gif][]    \};      
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][] var  objA  =   new  ClassA( " red " );  
![None.gif][] var  objB  =   new  ClassB( " blue " ,  " Nicholas " );  
![None.gif][]objA.sayColor();  
![None.gif][]objB.sayColor();  
![None.gif][]objB.sayName();

所有的新属性和新方法都必须在删除了新方法的代码行后定义,否则,可能会覆盖超类的相关属性和方法.

b.用Call()方法实现

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] function  ClassA(sColor)  ... \{  
![InBlock.gif][]    this.color = sColor;  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    this.sayColor = function () ...\{  
![InBlock.gif][]        alert(this.color);  
![ExpandedSubBlockEnd.gif][]    \};  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  ClassB(sColor, sName)  ... \{  
![InBlock.gif][]    //this.newMethod = ClassA;  
![InBlock.gif][]    //this.newMethod(color);  
![InBlock.gif][]    //delete this.newMethod;  
![InBlock.gif][]    ClassA.call(this, sColor);  
![InBlock.gif][]  
![InBlock.gif][]    this.name = sName;  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    this.sayName = function () ...\{  
![InBlock.gif][]        alert(this.name);  
![ExpandedSubBlockEnd.gif][]    \};  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][] var  objA  =   new  ClassA( " red " );  
![None.gif][] var  objB  =   new  ClassB( " blue " ,  " Nicholas " );  
![None.gif][]objA.sayColor();  
![None.gif][]objB.sayColor();  
![None.gif][]objB.sayName();  
![None.gif][]

c.用Apply()方法实现

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] function  ClassA(sColor)  ... \{  
![InBlock.gif][]    this.color = sColor;  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    this.sayColor = function () ...\{  
![InBlock.gif][]        alert(this.color);  
![ExpandedSubBlockEnd.gif][]    \};  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  ClassB(sColor, sName)  ... \{  
![InBlock.gif][]    //this.newMethod = ClassA;  
![InBlock.gif][]    //this.newMethod(color);  
![InBlock.gif][]    //delete this.newMethod;  
![InBlock.gif][]    ClassA.apply(this, arguments);  
![InBlock.gif][]  
![InBlock.gif][]    this.name = sName;  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    this.sayName = function () ...\{  
![InBlock.gif][]        alert(this.name);  
![ExpandedSubBlockEnd.gif][]    \};  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][] var  objA  =   new  ClassA( " red " );  
![None.gif][] var  objB  =   new  ClassB( " blue " ,  " Nicholas " );  
![None.gif][]objA.sayColor();  
![None.gif][]objB.sayColor();  
![None.gif][]objB.sayName();

call()有点类似于java中的反射机制,b.call(a,c)用汉语描述可以这样理解:对象a调用b方法,c是b方法的参数.apply类似,不过apply第二个参数是一个数组.

2.原型链

原型链类似对象模型中,用原型实现对象,原理是一样的.关键用到了prototype,例

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] function  ClassA()  ... \{  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]ClassA.prototype.color  =   " red " ;  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]ClassA.prototype.sayColor  =   function  ()  ... \{  
![InBlock.gif][]    alert(this.color);  
![ExpandedBlockEnd.gif][]\} ;  
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  ClassB()  ... \{  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]ClassB.prototype  =   new  ClassA();  
![None.gif][]  
![None.gif][]ClassB.prototype.name  =   "" ;  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]ClassB.prototype.sayName  =   function  ()  ... \{  
![InBlock.gif][]    alert(this.name);  
![ExpandedBlockEnd.gif][]\} ;  
![None.gif][]  
![None.gif][] var  objA  =   new  ClassA();  
![None.gif][] var  objB  =   new  ClassB();  
![None.gif][]objA.color  =   " red " ;  
![None.gif][]objB.color  =   " blue " ;  
![None.gif][]objB.name  =   " Nicholas " ;  
![None.gif][]objA.sayColor();  
![None.gif][]objB.sayColor();  
![None.gif][]objB.sayName();

子类的所有属性和方法都必须出现在prototype属性被赋值后,因为在它之前赋值的所有方法都会被删除,因为prototype属性被替换成了新对象,添加了新方法的原始对象将删除.原型链不支持多重继承,记住,原型链会用另一类型的对象重写类的prototype属性.

上面两种方法的缺点:

对象冒充的缺点是构造对象时必须使用构造函数方式,构造函数方式的缺点是:为所有的对象的所有属性和方法都建立一个副本,为对象的属性建立副本是没问题的,但为所有的方法也建立副本就没必要,这样会浪费内存,一个类的所有对象共享一个 方法的副本 就行了

原型链的缺点是:

建立对象是必须使用无参的构造函数,不能使用带参的构造函数.

基于上面两个原因,我们介绍第三种方法.

3.混合方式

混合方式类似于前面文章javascript对象类型的混合方式,用对象冒充继承构造函数的属性,用原型链继承prototype对象的方法.例

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

上面简单介绍了javascript的继承模型,其实javascript的继承模型不过是一个编程方式,思维模式的体现,用现有的一点条件,达到更多的效果.理解了其中的思维,原理,学习起来就能举一返三.

[ExpandedBlockStart.gif]: http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: /images/20220828/4a3edeb117e042f691d4caea6ed03c3e.png
[InBlock.gif]: /images/20220828/f6794a05bc3544a999468632aa4ab4f2.png
[ExpandedSubBlockStart.gif]: http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: /images/20220828/fe75ee4e0a3544a2b6192ebbfab06cd0.png
[ExpandedSubBlockEnd.gif]: /images/20220828/5edc9e5db7654d49971379498569db71.png
[ExpandedBlockEnd.gif]: /images/20220828/2666c9533b3d4b9b8c1c0e029007c02c.png
[None.gif]: /images/20220828/b745eabb9d67454db3b36e43e751a149.png