JQuery裏的原型prototype分析

在 JavaScript 中，每一個函數對象都有一個默認的屬性 prototype，稱爲函數對象的原型成員，這個屬性指向一個對象，稱爲函數的原型對象，當咱們每定義了一個函數的時候，JavaScript 就建立了一個對應的原型對象，也就是說，當咱們定義一個函數的時候，實際上獲得了兩個對象，一個函數對象，一個原型對象。原型對象是一個特殊的對象，函數的 prototype 成員指向它的原型對象。

能夠經過函數對象的 prototype 成員取得這個原型對象的引用。

下面定義一個函數對象 Person，而後經過 prototype 來取得它的原型對象。而後在它的原型對象上定義了一個方法。

01	function Person()

02

{

03

}

04

05	Person.prototype.showPerson = function()

06

{

07	alert( "Person Object.");

08

}

09

10	var alice = new Person();

11	alice.showPerson();

這個原型對象上定義的成員將用來共享給全部經過這個函數建立的對象使用。至關於 C# 中的實例方法，對象，函數和原型在內存中的關係以下圖所示：

每一個對象也都有一個原型成員 prototype，經過 new 函數建立的對象會經過函數的 prototype 找到函數的原型，而後將本身的原型指向這個對象。對於不是經過函數建立的對象實例和原型對象，它們的原型會被設置爲 Object 函數的原型對象。

Object 函數對象是 JavaScript 中定義的頂級函數對象，在 JavaScript 中全部的對象都直接或者間接地使用 Object 對象的原型。 當訪問對象的屬性或者方法的時候，若是對象自己沒有這個屬性或者方法，那麼，JavaScript 會檢查對象的 prototype 對象是否擁有這個屬性或者方法，若是有，則做爲對象的屬性或者方法返回，若是沒有，那麼將經過原型對象的 prototype 繼續進行檢查，直到原型對象爲 Object 函數的原型對象爲止。

可是 prototype 是一個特殊的屬性，在大多數的瀏覽器上，例如 IE 瀏覽器，都不能直接訪問對象的 prototype 成員。返回的結果爲 undefined。不能賦予對象一個新的原型，只能經過建立它的函數來肯定對象的原型。

函數對象的原型有一個特殊的用途，就是經過函數 new 建立出來的對象，會自動將函數對象的原型賦予新建立出的對象的原型。這樣，若是爲某個函數設置了原型對象，那麼，全部經過這個函數建立的對象將擁有一樣的原型對象。經過這個方法，可使這些對象共享相同的屬性或者方法，來模擬類型的概念。

在 jQuery 中，咱們常常使用的 $() 函數就是定義在 window 對象上的 $() 函數。

1	jQuery = window.jQuery = window.$ = function( selector, context )

2

{

3	// The jQuery object is actually just the init constructor 'enhanced'

4	return new jQuery.fn.init( selector, context );

5

}

這個函數實際上經過 new jQuery.fn.init( selector, context )來完成，也就是經過 init 函數建立了一個對象。

下面從新指定了函數 init 的原型對象。因此 init 函數的原型對象就是 fn 對象。

1	// Give the init function the jQuery prototype for later instantiation

2	jQuery.fn.init.prototype = jQuery.fn;

這樣全部經過 $ 建立出來的對象都將共享 fn 對象上的成員。所以，jQuery 對象都有了相似 attr 、html 等等方法了。

整理了一下 jQuery 的原型關係圖，理解起來更加方便一些。

圖例：黃色的爲對象，藍色的爲函數。