javascript中的原型鏈
要弄清楚原型鏈就要先弄清楚 function 類型,在javascript中沒有類的概念,都是函數(shù),所以它是一門函數(shù)式的編程語言。類有一個很重要的特性,就是它可以根據(jù)它的構(gòu)造函數(shù)來創(chuàng)建以它為模板的對象。在javascript中,函數(shù)就有2個功能
第一、 作為一般函數(shù)調(diào)用
第二、 作為它原型對象的構(gòu)造函數(shù) 也就new()
我們來看一個例子
[javascript] view plain copyfunction a(){
this.name = ‘a(chǎn)’;
}
當創(chuàng)建一個函數(shù),它會發(fā)生什么呢?
第一、它會創(chuàng)建1個函數(shù)對象 也就是a 本身
第二、它會創(chuàng)建1個原型對象@a(用@來表示)
第三、函數(shù)對象會有一個prototype指針,它指向了對應(yīng)的原型對象,這里就指向了@a
第四、@a對象中有一個construtor指針,指向它的構(gòu)造函數(shù),這里就指向了a
這個prototype屬性究竟有什么用呢?
其實prototype 屬性表示當前函數(shù)能夠控制的范圍(或者說它指明了當前函數(shù)是誰的構(gòu)造函數(shù)),這里a就是@a原型對象的構(gòu)造函數(shù),所以我們會看見有這種寫法
[javascript] view plain copyfunction a(){
this.name = ‘a(chǎn)’;
}
var a1 = new a();
這就和其他常見語言相似了,new 就是調(diào)用原型對象(通過prototype指針)里面構(gòu)造函數(shù)(constructor)創(chuàng)建一個新的對象實例。
那么修改了prototype指向?qū)ο罄锩娴膶傩裕簿陀绊懥怂幸运鼮槟0鍎?chuàng)建的實例,我們可以這樣來驗證
[javascript] view plain copyfunction a(){
this.name = ‘a(chǎn)’;
}
var a1 = new a();
a.prototype.age = 1;
alert(a1.age);
結(jié)果:1
那為什么a1對象可以直接訪問到age屬性呢?a1對象里面我并沒有定義age屬性啊,
那是因為所有實例里面都會有一個引用_proto_(在firfox,chrome下可以直接訪問,ie不支持)指向了這個原型,這里就是指向了@a,
[javascript] view plain copyfunction a(){
this.name = ‘a(chǎn)’;
}
var a1 = new a();
alert(a1._proto_ == a.prototype)
結(jié)果:true
在訪問屬性的時候,會先在a1對象內(nèi)部中尋找,如果沒有,就會順著_proto_指向的對象里面去尋找,這里會到@a中尋找,找到就返回值,沒有找到就返回undefined,用個成語來形容,就是順藤摸瓜嘛!
至此原型鏈的含義就出來了,由于原型對象也有一個_proto_指針,又指向了另一個原型,一個接一個,就形成了原型鏈。Object.prototype是最頂層的原型,所以如果修改了Object.prototype的屬性,那么就影響了所有的對象。
在來看一段代碼
[javascript] view plain copyfunction a(){
this.name = ‘a(chǎn)’;
}
function b(){
this.age = 1;
}
b.prototype = new a();
alert(new b().name);
我們顯示的將b的原型指向了a的一個實例,然后,b的實例也可以訪問a的屬性了。這就是javascript的繼承了,那為什么b.prototype 指向的是a的一個實例,而不是直接指向a.prototype 呢?
[javascript] view plain copyb.prototype = new a.prototype;
如果像上面這么寫,修改p.prototype中的屬性,那么a的原型也會改變了,相當于是子類修改了父類,并且子類和父類的屬性糅合在了一起,這顯然是不合適的。換句話說,b也成為了@a的構(gòu)造函數(shù),a,b成了平級的關(guān)系。
我們可以下一個定義:
函數(shù)a 繼承函數(shù)b 也就是讓函數(shù)a成為函數(shù)b原型的一個實例的構(gòu)造函數(shù),構(gòu)造函數(shù)里面聲明的屬性是函數(shù)a自己的,原型實例里面的屬性就是繼承b的
[javascript] view plain copyvar $ = jQuery = function(selector,context){
//不可能在自己的構(gòu)造函數(shù)中又一次構(gòu)造自己,所以返回了另外一個構(gòu)造函數(shù)的實例
return new init(selector,context);
}
jQuery.fn = jQuery.prototype = {
size:function(){
return this.length;
}
}
function init (selector,context){
}
init.prototype = jQuery.fn;;
}
這是jquery的一段源碼,我們在使用jquery的時候,并沒有使用new關(guān)鍵字,那它是如何構(gòu)造對象的呢?
用上面的知識,可以解釋,jquery這里只是一個一般函數(shù)的調(diào)用,它返回了jquery原型的另外一個構(gòu)造函數(shù)創(chuàng)建的對象,也就是new init()
評論
查看更多