不廢話，直接上關(guān)鍵。這個(gè)系列中有好些直接借用別人的資料，我將他們整合在自認(rèn)為比較合理的地方。所以在此先謝謝那些前輩。

注意：后續(xù)系列中jQuery實(shí)例多用$(...)來(lái)表示

1.??? 初始化與鏈?zhǔn)秸{(diào)用基礎(chǔ)

---

?

jQuery之所以能夠鏈?zhǔn)秸{(diào)用在于每次調(diào)用返回來(lái)jQuery本身。實(shí)現(xiàn)關(guān)鍵代碼如下。

?

jQuery = function(selector,context){return new jQuery.fn.init(selector,context,rootjQuery); } ... rootjQuery = jQuery(document); ... jQuery.fn = jQuery.prototype = {constructor: jQuery,init: function(selector,context,rootjQuery){
　　　　... 　　　　return this;...} } ... jQuery.fn.init.prototype = jQuery.fn; ... window.jQuery = window.$ = jQuery;

??

需要有幾個(gè)理解

a.??? new的深度理解

---

?var?obj = new?Base();

這樣代碼的結(jié)果是什么，我們?cè)贘avascript引擎中看到的對(duì)象模型是：

?

new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單，就干了三件事情。

var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);

第一行，我們創(chuàng)建了一個(gè)空對(duì)象obj；

第二行，我們將這個(gè)空對(duì)象的__proto__成員指向了Base函數(shù)對(duì)象prototype成員對(duì)象；

第三行，我們將Base函數(shù)對(duì)象的this指針替換成obj，然后再調(diào)用Base函數(shù)，于是我們就給obj對(duì)象賦值了一個(gè)id（name,根據(jù)瀏覽器決定，chrome是name屬性）成員變量，這個(gè)成員變量的值是”Base”。

?

Base函數(shù)返回的結(jié)果會(huì)導(dǎo)致obj的結(jié)果不同。

舉例（chrome下）：

function Base(){this.name = “test”;this.a = “f”;return result; }

1)???? 根據(jù)new的原理，如果沒(méi)有返回值或返回值為數(shù)字或字符串或布爾類(lèi)型，即result為null/number/string/bool,則new Base()返回的結(jié)果是本身，為

Base {name: "test", a: "f"}

2)???? 如果返回值為對(duì)象（數(shù)組或普通對(duì)象）或函數(shù)，則返回的對(duì)象或函數(shù)替換了Base本身；

拓展：

?????? new?Base()?==?Base ()?返回的結(jié)果為false

??? 例如當(dāng)result為[]的時(shí)候，new?Base()返回結(jié)果和Base()返回結(jié)果的都是[],但實(shí)際上他們并不相等 , Javascript? 對(duì)于 Object 和 Function 的比較是基于引用的.

Var m = [],t = []; m == t;//false,并不是同一個(gè)引用

Var m = t = []; m == t;//true

b.??? jQuery中jQuery.fn為什么表現(xiàn)為數(shù)組

---

?

jQuery將對(duì)象模擬成了數(shù)組，而如何讓一個(gè)對(duì)象模擬成數(shù)組，jQuery給對(duì)象加上了以下幾個(gè)屬性：

{length: 0,push: [].push,sort: [].sort,splice: [].splice }，

不同的是chrome在給對(duì)象添加了length和splice后真的轉(zhuǎn)化成了數(shù)組，如$()結(jié)果是[],而ie沒(méi)有轉(zhuǎn)化$()結(jié)果是{}。但是無(wú)所謂，他們都可以使用length等屬性，不影響后續(xù)使用。如果$(…)有搜索結(jié)果，jQuery會(huì)把結(jié)果拼接成數(shù)組返回，這樣jQuery的返回結(jié)果看起來(lái)總是數(shù)組。

?

總結(jié)

---

?

　　由上面的分析可知jQuery.fn.init.prototype = jQuery.fn目的就是將jQuery.fn上的所有屬性都掛在jQuery實(shí)例$(...)上，使得實(shí)例擁有很多jQuery.fn上定義的函數(shù)。比如jQuery.fn.extend函數(shù)，實(shí)例就可以直接使用：$(...).extend({"name": "chua"})。

　　由于每次都是一個(gè)新的實(shí)例new jQuery.fn.init(selector,context,rootjQuery)，所以各個(gè)實(shí)例是獨(dú)立的。而jQuery全局的屬性直接掛在jQuery上，比如jQuery.extend,這個(gè)和jQuery.fn.extend不一樣了，因?yàn)閖Query.extend是全局的，比如jQuery.extend（{"test": "chua"}）你可以隨時(shí)通過(guò)jQuery.test就把值給取出來(lái)了，而jQuery實(shí)例則需要保證同一個(gè)實(shí)例的情況下才能取到值。比如var ps = $("p").extend({"test": "chua"}),通過(guò)ps.test能夠取到值，但是你使用$("p").test是取不到的。因?yàn)槟闶褂?(...)又新建了一個(gè)實(shí)例。

　　至于jQuery的鏈?zhǔn)秸{(diào)用很好理解，源碼初始化的時(shí)候返回了jQuery對(duì)象本身：

init: function(selector,context,rootjQuery){... 　　return this; }

　　這一節(jié)先到這里，待續(xù)……

?

　　如果覺(jué)得本文不錯(cuò)，請(qǐng)點(diǎn)擊右下方【推薦】！

轉(zhuǎn)載于:https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-frame1.html

總結(jié)

以上是生活随笔為你收集整理的jQuery-1.9.1源码分析系列（一）整体架构的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。