快捷導(dǎo)航

javascript學(xué)習(xí)筆記(十) js對(duì)象繼承

更新時(shí)間：2012年06月19日 23:21:12 作者：

javascript學(xué)習(xí)筆記之js對(duì)象繼承介紹，需要的朋友可以參考下

1.原型鏈
//很少單獨(dú)使用

 
View Code 
//定義 SuperClass類(lèi)，有一個(gè)屬性property和一個(gè)方法getSuperValue 
function SuperClass() { 
this.property = true; 
} 
SuperClass.prototype.getSuperValue = function() { 
return this.property; 
} 

//定義SubClass類(lèi)，有一個(gè)屬性subproperty和后來(lái)添加的一個(gè)方法getSubValue 
function SubClass() { 
this.subproperty = false; 
} 

//SubClass類(lèi)繼承SuperClass類(lèi) 
SubClass.prototype = new SuperClass(); 

//SubClass類(lèi)添加一個(gè)方法getSubValue 
SubClass.prototype.getSubValue = function() { 
return this.subproperty; 
} 

//創(chuàng)建SubClass類(lèi)的實(shí)例 
var instance = new SubClass(); 
alert(instance.getSuperValue()); 

2. 確定原型與實(shí)例的關(guān)系
第一種方式用 instanceof 操作符，用來(lái)測(cè)試實(shí)例和原型鏈中出現(xiàn)過(guò)的構(gòu)造函數(shù)

復(fù)制代碼代碼如下:

 
alert(instance instanceof Object); //true ，instance是Object的實(shí)例嗎? 
alert(instance instanceof SuperClass); //true ，instance是SuperClass的實(shí)例嗎? 
alert(instance instanceof SubClass); //true，instance是SubClass的實(shí)例嗎? 

第二種方式用 isPrototypeOf()方法，測(cè)試原型鏈中出現(xiàn)的原型

復(fù)制代碼代碼如下:

 
alert(Object.prototype.isPrototypeOf(instance)); //true 
alert(SuperClass.prototype.isPrototypeOf(instance)); //true 
alert(SubClass.prototype.isPrototypeOf(instance)); //true 

3. 用原型鏈繼承定義方法時(shí)的注意點(diǎn)
定義方法是的順序：

復(fù)制代碼代碼如下:

 
View Code 
function SuperClass() { 
this.property = true; 
} 
SuperClass.prototype.getSuperValue = function() { 
return this.property; 
} 

function SubClass() { 
this.subproperty = false; 
} 

//SubClass繼承SuperClass 
SubClass.prototype = new SuperClass(); //這個(gè)要先寫(xiě)，新添加的方法和重寫(xiě)超類(lèi)的方法要寫(xiě)在后面，否則重寫(xiě)的超類(lèi)方法將永遠(yuǎn)無(wú)法調(diào)用 

//添加新方法 
SubClass.prototype.getSubValue = function() { 
return this.subproperty; 
} 
//重寫(xiě)超類(lèi)的方法 
SubClass.prototype.getSuperValue = function() { 
return false; 
} 
var instance = new SubClass(); 
alert(instance.getSuperValue()); //fales,這里SubClass的實(shí)例調(diào)用了SubClass的getSuperValue()方法，而屏蔽了SuperClass的getSuperValue()方法， 
//使用SuperClass的方法會(huì)調(diào)用SuperClass的getSuperValue()方法 

原型鏈繼承的缺點(diǎn)：1）共享超類(lèi)中的屬性，2）在創(chuàng)建子類(lèi)時(shí)不能向超類(lèi)的構(gòu)造函數(shù)傳遞參數(shù)。所有很少單獨(dú)使用原型鏈

4.借用構(gòu)造函數(shù)
//很少單獨(dú)使用

優(yōu)點(diǎn)：可以向超類(lèi)傳遞參數(shù) 。缺點(diǎn)：函數(shù)無(wú)法復(fù)用，所有類(lèi)都要使用構(gòu)造函數(shù)模式

復(fù)制代碼代碼如下:

 
View Code 
function SuperClass(name) { 
this.name = name; 
} 
function SubClass(){ 
SuperClass.call(this,"RuiLiang"); //繼承了SuperClass,同時(shí)向SuperClass傳遞了參數(shù) 
this.age = 29; //實(shí)例屬性 
} 

var instance = new SubClass(); 
alert(instance.name); //RuiLiang 
alert(instance.age); //29 

6.組合繼承
//最常用的繼承模式

復(fù)制代碼代碼如下:

 
View Code 
//創(chuàng)建SuperClass 
function SuperClass(name) { 
this.name = name; 
this.colors = ["red","blue","green"]; 
} 
SuperClass.prototype.sayName = function() { 
alert(this.name); 
} 

////創(chuàng)建SubClass 
function SubClass(name,age) { 
SuperClass.call(this,name); //繼承屬性 
this.age = age; //自己的屬性 
} 

SubClass.prototype = new SuperClass(); //繼承方法 
SubClass.prototype.sayAge = function() { //SubClass添加新方法 
alert(this.age); 
}; 

//使用 
var instance1 = new SubClass("RuiLiang",30); 
instance1.colors.push("black"); 
alert(instance1.colors); //"red,blue,green,black" 
instance1.sayName(); //"RuiLiang" 
instance1.sayAge(); //30 

var instance2 = new SubClass("XuZuNan",26); 
alert(instance2.colors); //"red,blue,green" 
instance2.sayName(); //"RuiLiang" 
instance2.sayAge(); //30 