jQuery原始碼解讀一
阿新 • • 發佈：2019-01-02
在使用jQuery的過程中，深深體會著jQuery的宗旨：write less, do more. 在解讀jQuery書上有句話我特別的喜歡，送給大家："jQuery說，給你一個方法，你能讓網際網路炫目富有！"，看到這裡，我們不禁會想起阿基米德的那句精彩的話：給我一個支點，我可以撬動地球。
反覆的利用jQuery開發了自己的前端頁面後，藉助jQuery豐富的文件，很快就可以實現自己的幾個頁面，在感嘆其精簡的寫法，強大的選擇器和鏈式語法後，我幾乎會在每個專案中引入jQuery。使用已一段事件後，我有了很多的困惑，怎麼理解的它的閉包機制，怎麼寫出高效的選擇器，而不是像剛開始寫jQuery時，選擇器的用法，我幾乎不怎麼使用filter()和find()，幾乎直接把css中的選擇器一股腦的寫入到強大的jQuery入口函式裡，這樣寫真的沒什麼問題？那麼jQuery為什麼為我們提高大量的匹配和篩選的方法，直到我看到jQuery社群的官方的講解視訊，不愧為jQuery維護者之一，他在短短的視訊裡，講解了jQuery入門的知識，卻讓我看到了新意和差距。大家不妨看看，這裡給出中文翻譯版http://blog.jobbole.com/37699/
給出自己的第一個理解：
var $ = jQuery = function(){ return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init: function(){ this.length = 0; this.test = function(){ return this.length; } return this; }, jquery: "1.3.2", length: 1, size: function(){ return this.length; } } jQuery.fn.init.prototype = jquery.fn; console.log($().jquery); //"1.3.2" console.log($().test()); //0 console.log($().size()); //0
這裡需要理解 jQuery.fn.init.prototype = jquery.fn; 使用jQuery的原型物件覆蓋了init的原型物件.
new jQuery.fn.init()建立的新物件擁有init的原型物件的方法，通過改變prototype的指標的指向，使其指向jQuery的原型物件，自然就繼承了jQuery，length屬性和size()，否則，使用init()建立的物件無法訪問作用域外的size()，jquery.
關於作用域，張雪鋒的部落格說的非常詳細，大神理解的比較透徹。