JavaScript 继承机制的实现(待续)

259 阅读 0 评论 171 点赞

我是靠谱客的博主呆萌墨镜，最近开发中收集的这篇文章主要介绍JavaScript 继承机制的实现(待续)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.对象冒充
原理：构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。
因为构造函数只是一个函数，所以可使ClassA的构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。
例如：
下面方式定义的ClassA和ClassB：

复制代码代码如下:

 
function ClassA(sColor){ 
this.color=sColor; 
this.sayColor=function(){ 
alert(this.color); 
}; 
} 

function ClassB(sColor){ 
} 

关键字this引用的是构造函数当前创建的对象。
不过在这个方法中国，this指向的是所属的对象。这个原理把ClassA作为常规函数来建立继承机制，而不是作为构造行数。
如下使用构造函数ClassB可以实现继承机制：

复制代码代码如下:

 
function ClassB(sColor){ 
this.newMethod=ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 
} 

这段代码中，为（但我觉得这里应该是"把"）ClassA赋予了方法newMethod（记住函数名只是指向它的指针）。然后调用该方法，传递给它的是ClassB的构造函数的参数sColor。最后一行代码删除了对ClassA的引用，这样以后就不能再调用它。
所有的新属性和新方法都必须删除了新方法的代码行后定义。否则，可能会覆盖超类的相关属性和方法：

复制代码代码如下:

 
function ClassB(sColor,sName){ 
this.newMethod=classA; 
this.newMethod(sColor); 
delete this.newMethod; 

this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
}; 
} 

运行下面的例子：

复制代码代码如下:

 
var objA=new ClassA("red"); 
var objB=new ClassB("blue","Nicholas"); 
objA.sayColor();//outputs "red" 
objB.sayColor();//outputs "blue" 
objB.sayName(); //outputs "Nicholas" 

例如，如果存在两个类ClassX和ClassY，ClassZ想继承这两个类，可以使用下面的代码：

复制代码代码如下:

 
function ClassZ(){ 
this.newMethod=ClassX; 
this.newMethod(); 
delete this.newMethod; 

this.newMethod=ClassY; 
this.newMethod(); 
delete this.newMethod; 
} 

这里存在一个弊端，如果ClassX和ClassY具有同名的属性或方法，ClassY具有高优先级，因为它从后面继承。除了这一点小问题外，用对象冒充实现多继承机制轻而易举。
由于这种继承方式的流行，ECMAScript的第三版为Function对象加入了两个新方法，即call()和apply()。
2.call()方法
call()方法与经典的对象冒充方法最相似的方法。它的第一个参数用作this的对象。其他参数都直接传递给函数自身。例如：

复制代码代码如下:

 
function sayColor(sPrefix,sSuffix){ 
alert(sPrefix+this.color+sSuffix); 
}; 
var obj=new Object(); 
obj.color="red"; 
//outputs "The color is red,a very nice color indeed." 
sayColor.call(obj,"The color is ",", a very nice color indeed.") 

在这个例子中，函数sayColor()在对象外定义，即使它不属于任何对象，也可以引用关键字this。对象的obj的color属性等于"red"。调用call()方法时，第一个参数是obj，说明
应该赋予sayColor()函数中的this关键字的值是obj。第二个和第三个参数是字符串。它们与sayColor()函数中的参数prefix和suffix匹配，最后生成消息"The color is red, a very nice color indeed."
要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值、调用和删除代码替换即可：

复制代码代码如下:

 
function ClassB(sColor,sName){ 
//this.newMethod=classA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
Class.call(this,sColor); 

this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
}; 
} 

这里，想让ClassA中的关键字this等于新创建的ClassB对象，因此this是第一个参数。第二个参数sColor对两个类来说都是唯一的参数。
3.apply()方法
apply()方法有两个参数，用作this的对象和要传递给函数的参数和数组。例如：

复制代码代码如下:

 
function sayColor(sPrefix,sSuffix){ 
alert(sPrefix+this.color+sSuffix); 
}; 
var obj=new Object(); 
obj.color="red"; 

//outputs "The Color is red,a very nice color indeed." 
sayColor.apply(obj,new Array("The Color is ",",a very nice color indeed.")); 

这个例子与前面的例子相同，只是现在调用的是apply()方法。调用apply()方法时，第一个参数仍是obj,说明应该赋予sayColor()中的this关键字值是obj。第二个参数是由两个字符串组成的数组，与sayColor()的参数prefix和suffix匹配。生成的消息仍是
"The Color is red,a nice color indeed."
该方法也用于替换前三行的赋值、调用和删除新方法的代码：

复制代码代码如下:

 
function ClassB(sColor,sName){ 

//this.newMethod=classA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
ClassA.apply(this,new Array(sColor)); 

this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
}; 
} 

同样的，第一个参数仍是this。第二个参数是只有一个值color的数组。可以把ClassB的整个arguments对象作为第二个参数传递给apply()方法：

复制代码代码如下:

 
function ClassB(sColor,sName){ 

//this.newMethod=classA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
ClassA.apply(this,arguments); 

this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
}; 
} 

当然，只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象。如果不是，就必须创建一个单独的数组，按照正确的顺序放置参数。此外，还可以使用call()方法。