快捷導(dǎo)航

javascript是怎么繼承的介紹

更新時(shí)間：2012年01月05日 11:34:19 作者：

關(guān)于js中的繼承，網(wǎng)上有很多文章了，在這里我寫(xiě)出自己對(duì)js中的繼承的理解

第一個(gè)階段:

 
function A(){ 
this.funB = function(){ 
alert('A:funB'); 
}; 
} 
A.prototype = { 
funA:function(){ 
alert('A:funA'); 
} 
}; 
function B(){ 
} 
function extend(sub,parent){ 
sub.prototype = new parent(); 
sub.prototype.constructor = sub; 
} 
extend(B,A); 
var b = new B(); 
b.funA(); // out 'A:funA' 
b.funB(); // out 'A:funB' 
alert(b instanceof A); // out "true" 

想必大家一眼就看出什么意思了，先是定義了A,B兩個(gè)類(lèi)，然后使用extend方法來(lái)讓B繼承A類(lèi)。extend的原理就是讓父類(lèi) new 到子類(lèi)的prototype上。
用instanceof來(lái)檢測(cè)也為true，想要讓instanceof為true，那就必須兩個(gè)類(lèi)的prototype對(duì)象要為同一個(gè)object，不管是間接或直接的。
這樣的方式有沒(méi)有問(wèn)題呢？在通常面向?qū)ο笳Z(yǔ)言中，子類(lèi)在繼承父類(lèi)時(shí)，是不會(huì)觸發(fā)父類(lèi)的構(gòu)造函數(shù)執(zhí)行,而這里是父類(lèi)是在繼承時(shí)執(zhí)行的。
第二個(gè)階段

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

 
function A(){ 
this.Astr = 'hello A'; 
} 
A.prototype = { 
funA:function(){ 
alert(this.Astr); 
} 
}; 
function B(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
this.Bstr = 'hello B'; 
} 
B.prototype = { 
funB:function(){ 
alert(this.Bstr); 
} 
}; 
function C(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
alert(this.Astr); 
alert(this.Bstr); 
} 
function extend(sub,parent){ 
var subproto = sub.prototype; 
sub.prototype = parent.prototype; 
typeof subproto != 'object' && (subproto = {}); 
typeof sub.prototype != 'object' && (sub.prototype = {}); 
for(var i in subproto){ 
sub.prototype[i] = subproto[i]; 
} 
sub.superclass = parent; 
} 
//B 繼承 A 
extend(B,A); 
//C 繼承 B 
extend(C,B); 
var c = new C(); // out 'hello A','hello B' 
c.funA(); //out 'hello A' 
c.funB(); // out 'hello B' 
alert(c instanceof A) // out true 
alert(c instanceof B) // out true; 

這里對(duì)extend方法做了一些改動(dòng)，這里有個(gè)約定，每個(gè)子類(lèi)都擁有一個(gè)superclass的屬性，用來(lái)引用她所繼承的父類(lèi)，用一個(gè)空函數(shù)proto來(lái)獲得父類(lèi)的prototype，實(shí)例化給子類(lèi)的prototype，這樣就沒(méi)有執(zhí)行父類(lèi)構(gòu)造器。
而是在子類(lèi)的構(gòu)造器中用下來(lái)一段代碼來(lái)執(zhí)行約定要的父類(lèi)構(gòu)造器。

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

 
arguments.callee.superclass && arguments.callee.superclass.apply(this,argumengs); 

這樣就完成了類(lèi)的繼承。
對(duì)于上面的代碼有沒(méi)有更方便的繼承寫(xiě)法呢，修改Function的原型來(lái)看看:

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

 
Function.prototype.extend = function(parent){ 
var subproto = this.prototype; 
this.prototype = parent.prototype; 
typeof subproto != 'object' && (subproto = {}); 
typeof this.prototype != 'object' && (this.prototype = {}); 
for(var i in subproto){ 
this.prototype[i] = subproto[i]; 
} 
this.superclass = parent; 
return this; 
} 
function A(){ 
this.Astr = 'hello A'; 
} 
A.prototype = { 
funA:function(){ 
alert(this.Astr); 
} 
}; 
var B = function(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
this.Bstr = 'hello B'; 
} 
B.prototype = { 
funB:function(){ 
alert(this.Astr); 
} 
}; 
B.extend(A); 
var C = function(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
alert(this.Astr); 
alert(this.Bstr); 
}.extend(B); 
var c = new C(); // out 'hello A','hello B' 
c.funA(); //out 'hello A' 
c.funB(); // out 'hello B' 
alert(c instanceof A) // out true 
alert(c instanceof B) // out true; 

這里的extend做的事情是: subproto引用子類(lèi)的原prototype ,將子類(lèi)的prototype 指向父類(lèi)的prototype對(duì)象，這樣就繼承了父類(lèi)（這樣的目的是讓子類(lèi)實(shí)例 instanceof 父類(lèi) 為 true）。然后歷遍subproto,將原prototype的成員添加到現(xiàn)prototype上,這樣子類(lèi)重名的重名的成員就會(huì)覆蓋父類(lèi)的成員。最后將子類(lèi)的屬性superclass 指向父類(lèi)。
js繼承的關(guān)鍵就是保持原型鏈的唯一性，instanceof就以判斷實(shí)例的__proto__是否和父類(lèi)的prototype為同一Object.

作者 cnblogs OD

您可能感興趣的文章: