jQuery原始碼的乙個坑

大半夜也真是夠了，想學著jq造個小輪子鞏固下js，結果一開始就卡住了。

雖然之前也看過原始碼，但是主要是研究方法實現什麼的，對於框架主函式和入口結構不怎麼熟悉，於是想著一步一步除錯看看。

$('#div')

簡單吧，為了方便除錯看過程，直接呼叫選擇符，而且是乙個id，可以快速匹配呼叫原生方法。

大概流程是這樣的。

var
version = "3.1.1",
//define a local copy of jquery
jquery = function
(selector, context) ,

首先，如我所料進入了主函式，然後呼叫了new準備構造出乙個物件（目的是為了應對奇怪的引數導致錯誤）。

//
一號坑 沒注意到縮寫
init = jquery.fn.init = function
(selector, context, root) 
//...
}

然後，進入了初始化函式，jq有很多地方多縮寫了，比如說jquery.fn=jquery.prototype，這裡也縮寫，當時沒注意。

一般情況會進入sizzle引擎，但是因為用的id，比較簡單，提前返回。返回的是乙個'jquery'物件，裡面包含乙個dom節點，原型有大量的方法。（這裡一定要加上引號）

好，開始學著造輪子。

//
入口函式
var jimmy = function
(ele) ;
//是要簡化一下
jimmy.fn =jimmy.prototype;
//超簡單擴充套件函式
jimmy.fn.extend = function
(o1, o2) 
return
this
; };
//初始化
jimmy.fn.init = function
(ele, ctx)

其中有段**大概是這樣子，反正我又不做相容，問題出現了！我的jimmy物件原型，啥方法都沒有，準備用來擴充套件的extend也沒有。

我就照著之前的除錯又跑了一遍，還在函式中新增了多個console.log。結果發現jquery原始碼在進入初始化函式中，this指向的是jquery.init.prototype，這個理論上是沒問題的，畢竟new出乙個物件，預設就是這樣的，接著函式中直接返回了this。

對著控制台我就看到了這個jquery物件是這個樣子的，jquery.fn.init[1]。wtk！說好的jquery物件呢？怎麼是jquery原型的初始化物件？我可能初始化了乙個假的jquery物件。。。接著點開了__proto__屬性，刷的一下方法就出來了。這？？？也就是說方法是定義在jquery.fn.init.__proto__上的。

回頭又翻了下jquery的擴充套件函式extend，發現貌似是普通的拷貝，並沒有對this做特殊處理。也就是說，原型方法還是在jquery原型上。那為什麼方法怎麼跑到jquery原型方法的原型上的？？？

我一行一行的看**，直到我發現這麼一條語句。

//
give the init function the jquery prototype for later instantiation
init.prototype = jquery.fn;

恩，對的，在後面**的某一行中，出現了這麼一條語句，就像兩個高手進行結拜一樣，這兩玩意的原形應該是這樣的。

jquery.prototype.init.prototype = jquery.prototype

這條語句確實挺噁心的，但是更噁心的是放原始碼中間，還加了一句注釋：將jquery原型給init函式方便後面初始化。

後面你妹啊！初始化語句全在前面好不！恩，好吧，英文博大精深，應該是說方便jquery之後執行初始化。

總之，我一晚上的時間都獻給了這句**，雖然弄明白了初始化，但是總感覺被作者耍了，還是尤大的vue好，即使看不懂也不會碰到隱藏的'寶藏'。

完結撒花

jQuery原始碼的乙個坑

JQuery的第乙個句原始碼

乙個socket原始碼

乙個socket原始碼

jQuery原始碼的乙個坑

JQuery的第乙個句原始碼

乙個socket原始碼

乙個socket原始碼

相關推薦