javascript中的原型鏈深入理解

更新時間：2014年02月24日 15:23:51 作者：

要弄清楚原型鏈就要先弄清楚 function 類型，在javascript中沒有類的概念，都是函數(shù)，所以它是一門函數(shù)式的編程語言

要弄清楚原型鏈就要先弄清楚 function 類型，在javascript中沒有類的概念，都是函數(shù)，所以它是一門函數(shù)式的編程語言。類有一個很重要的特性，就是它可以根據(jù)它的構造函數(shù)來創(chuàng)建以它為模板的對象。在javascript中，函數(shù)就有2個功能

第一、作為一般函數(shù)調用
第二、作為它原型對象的構造函數(shù) 也就new()

我們來看一個例子

復制代碼代碼如下:

 
function a(){ 
this.name = 'a'; 
} 

當創(chuàng)建一個函數(shù)，它會發(fā)生什么呢？

第一、它會創(chuàng)建1個函數(shù)對象也就是a 本身

第二、它會創(chuàng)建1個原型對象@a(用@來表示)

第三、函數(shù)對象會有一個prototype指針，它指向了對應的原型對象，這里就指向了@a

第四、@a對象中有一個construtor指針，指向它的構造函數(shù)，這里就指向了a

http://img.blog.csdn.net/20140222125611500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGpsMTU3MDEx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

這個prototype屬性究竟有什么用呢？

其實prototype 屬性表示當前函數(shù)能夠控制的范圍（或者說它指明了當前函數(shù)是誰的構造函數(shù)），這里a就是@a原型對象的構造函數(shù)，所以我們會看見有這種寫法

復制代碼代碼如下:

 
function a(){ 
this.name = 'a'; 
} 

var a1 = new a(); 

這就和其他常見語言相似了，new 就是調用原型對象（通過prototype指針）里面構造函數(shù)（constructor）創(chuàng)建一個新的對象實例。

那么修改了prototype指向對象里面的屬性，也就影響了所有以它為模板創(chuàng)建的實例，我們可以這樣來驗證

復制代碼代碼如下:

 
function a(){ 
this.name = 'a'; 
} 

var a1 = new a(); 
a.prototype.age = 1; 
alert(a1.age); 

結果：1

那為什么a1對象可以直接訪問到age屬性呢？a1對象里面我并沒有定義age屬性啊，

那是因為所有實例里面都會有一個引用_proto_(在firfox，chrome下可以直接訪問，ie不支持)指向了這個原型，這里就是指向了@a，

復制代碼代碼如下:

 
function a(){ 
this.name = 'a'; 
} 

var a1 = new a(); 
alert(a1._proto_ == a.prototype) 

結果：true

在訪問屬性的時候，會先在a1對象內部中尋找，如果沒有，就會順著_proto_指向的對象里面去尋找，這里會到@a中尋找，找到就返回值，沒有找到就返回undefined，用個成語來形容，就是順藤摸瓜嘛！

至此原型鏈的含義就出來了，由于原型對象也有一個_proto_指針，又指向了另一個原型，一個接一個，就形成了原型鏈。Object.prototype是最頂層的原型，所以如果修改了Object.prototype的屬性，那么就影響了所有的對象。

在來看一段代碼

復制代碼代碼如下:

 
function a(){ 
this.name = 'a'; 
} 

function b(){ 
this.age = 1; 
} 

b.prototype = new a(); 
alert(new b().name); 

我們顯示的將b的原型指向了a的一個實例，然后，b的實例也可以訪問a的屬性了。這就是javascript的繼承了，那為什么b.prototype 指向的是a的一個實例，而不是直接指向a.prototype 呢？

復制代碼代碼如下:

b.prototype = new a.prototype；

如果像上面這么寫,修改p.prototype中的屬性，那么a的原型也會改變了，相當于是子類修改了父類，并且子類和父類的屬性糅合在了一起，這顯然是不合適的。換句話說，b也成為了@a的構造函數(shù)，a，b成了平級的關系。

我們可以下一個定義：

函數(shù)a 繼承函數(shù)b 也就是讓函數(shù)a成為函數(shù)b原型的一個實例的構造函數(shù)，構造函數(shù)里面聲明的屬性是函數(shù)a自己的，原型實例里面的屬性就是繼承b的

復制代碼代碼如下:

 
var $ = jQuery = function(selector,context){ 
//不可能在自己的構造函數(shù)中又一次構造自己，所以返回了另外一個構造函數(shù)的實例 
return new init(selector,context); 
} 
jQuery.fn = jQuery.prototype = { 
size:function(){ 
return this.length; 
} 
} 

function init (selector,context){ 

} 
init.prototype = jQuery.fn;; 
} 