快捷導(dǎo)航

javascript是怎么繼承的介紹

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

關(guān)于js中的繼承，網(wǎng)上有很多文章了，在這里我寫出自己對(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è)類，然后使用extend方法來讓B繼承A類。extend的原理就是讓父類 new 到子類的prototype上。
用instanceof來檢測也為true，想要讓instanceof為true，那就必須兩個(gè)類的prototype對(duì)象要為同一個(gè)object，不管是間接或直接的。
這樣的方式有沒有問題呢？在通常面向?qū)ο笳Z言中，子類在繼承父類時(shí)，是不會(huì)觸發(fā)父類的構(gòu)造函數(shù)執(zhí)行,而這里是父類是在繼承時(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è)子類都擁有一個(gè)superclass的屬性，用來引用她所繼承的父類，用一個(gè)空函數(shù)proto來獲得父類的prototype，實(shí)例化給子類的prototype，這樣就沒有執(zhí)行父類構(gòu)造器。
而是在子類的構(gòu)造器中用下來一段代碼來執(zhí)行約定要的父類構(gòu)造器。

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

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

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

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

作者 cnblogs OD

您可能感興趣的文章: