jQuery對象的建立（一）

標籤：type   訪問   return   選擇   執行   his   span   init   入口   

在jQuery的常規用法中，執行“$()”返回的是一個jQuery對象，在源碼中，它是這樣定義的：

...var jQuery = function() {    return new jQuery.fn.init();}...jQuery.fn = jQuery.prototype;

可以得出以下幾個結論：

1、jQuery.fn.init()就是jQuery.prototype.init()；
2、init()函數是一個建構函式，就是通過調用它建立的jQuery對象，它定義在jQuery()的原型中；

...var init = jQuery.fn.init = function(){    ...    return this;}init.prototype = jQuery.fn;

可以得出以下幾個結論：
1、init()建構函式最後返回了這個新對象的引用；
2、用jQuery()的原型覆蓋了init()的原型；

 

現在的問題是，為什麼jQuery會這麼寫呢？
再看一遍，我們的目的是建立一個jQuery類，它包含了一系列可調用的函數，執行個體化這個類得到jQuery對象，它可以這麼寫：

var jQuery = function(){    ...}jQuery.prototype = function(){    ...}var j = new jQuery();

顯然，jQuery不是這樣的，他使用了無new構造，就像下面這樣：

var jQuery = function(){    return new init();}jQuery.prototype = function(){    ...}var init = function(){    ...    return this;}init.prototype = function(){    ...}

但是，如果這樣寫，jQuery函數就僅僅成為一個入口了，init函數才是真正的實現，因此jQuery將init()放在了jQuery.prototype()裡面，即：

var jQuery = function(){    return new jQuery.prototype.init();}jQuery.prototype = function(){    ...    init: function(){        ...        return this;    }}init.prototype = function(){    ...}

此時，還有一個問題：新建立的對象無法訪問jQuery.prototype()中的其他屬性，解決方案是：將jQuery.prototype傳遞給jQuery.prototype.init.prototype

var jQuery = function(){    return new jQuery.prototype.init();}jQuery.prototype = function(){    ...    init: function(){        ...        return this;    }}jQuery.prototype.init.prototype = jQuery.prototype;

建立jQuery對象的整個流程如下：

“調用$()方法”->“調用jQuery.prototype.init()建構函式”->“根據選取器不同返回不同的jQuery對象”->“不同jQuery對象中相同的方法寫在jQuery.prototype中”->“將jQuery.prototype傳遞給jQuery.prototype.init.prototype，這樣新建立的對象才可以訪問通用方法”

jQuery對象的建立（一）