車大棒淺談jQuery源碼（二）

前言

本來只是一個自己學習jQuery筆記的簡單分享，沒想到獲得這么多人賞識。我自己也是傻呵呵的一臉迷茫，感覺到受寵若驚。

不過還是有人向批判我的文章說，這是基本知識點，完全跟jQuery源碼沾不上邊。說jQuery博大精深，還要我靜下心來研究, 別凈整些沒用的。弄的我一臉懵逼，WTF？我從頭到尾都沒有說我講的多高端，我連標題都寫的“淺談”。就完全不能讓我等菜鳥慢慢先從的簡單的入手嗎？

但是有位名為“萌新”三好童鞋，就做的非常好。“啪”！，反手就是一拖鞋留言砸過來一串代碼。指出說undefined在ES5、ES6標准中只是全局作用域下不能被定義，一旦脫離全局作用域下undefined就能夠被定義。

所以希望能夠像能夠像萌新同學狠狠打臉找知識點錯誤，而不是指出我這個太簡單一類的。這個我本來就是個人學習過程的淺談一下，給菜鳥一點活路嗎！

原型prototype

我們創建的每個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。
--《高級程序第三版》-6.23 原型模式

這里我引用了高級程序第三版當中的一段話用來簡單描述原型prototype，但是這個玩意具體有什么用？
解釋何為原型之前, ⾸先看下⾯的代碼：

     //創建一個構造函數
	function Person() {
		this.sayHello = function() {
			console.log('Hello，I am one Dog')
		}
	}

	//創建兩個對象
	var dog1 = new Person(),
		dog2 = new Person();

	//兩個實例對象進行比較
	dog1.sayHello();
	dog2.sayHello();
	console.log("dog1.sayHello === dog2.sayHello的結果是：" + (dog1.sayHello === dog2.sayHello));

控制台輸出結果：

這里dog1，dog2都是構造函數Person的實例，但是兩個人的sayHello方法並不完全相等。也就是說dog1和dog2分別在自己所屬空間開辟了一塊內存。

夭壽啦！單身狗為何不報團取暖，不是說好一起相親相愛嗎！不是說好一起共享種子，一起開黑嗎？月黑風高秋名山一起開車嗎！

所以為了避免原本每天遭受狗糧侵蝕單身汪繼續團結一致，這個時候原型prototype就起到很好的穩定dog群內團結的作用。

    //創建一個構造函數
	function Person(){};
	Person.prototype.sayHello = function(){
		console.log("Hello, I am one Dog")
	}
	
	//創建兩個對象
	var dog1 = new Person(),
		dog2 = new Person();
	
	//兩個實例對象進行比較
	dog1.sayHello();
	dog2.sayHello();
	console.log("dog1.sayHello === dog2.sayHello的結果是："+ (dog1.sayHello === dog2.sayHello));

控制台輸出結果：

說明此時兩名單身狗又團結一致，資源共享sayHello方法。而不是每個私自建立一個空間，去存放sayHello方法。

當實例對象需要尋找sayHello方法的時候，就會先去構造函數Person函數當中尋找sayHello方法，然后Person函數方法當中沒有找到，就會去Person的原型當中去找sayHello方法。（同理在JavaScript當中，如果創建多個對象，但是卻只共享一個方法。減少了內存的使用，能夠優化性能不少。）

而jQuery里面也充斥不少原型prototype，所以看下面jQuery代碼，就會知道相應查找順序了，同樣也能更好的理解后面的代碼。

jQuery無new構造

之前第一章，我們有講過jquery通過如下代碼來暴露接口：

window.jquery = window.$ = jQuery

舉個栗子：

$("#box")   =  jQuery("#box")

那么jQuery這個函數開始執行，此時讓我們打開jQuery源碼，看看jQuery內部是如何實現的。

(function(window, undefined) {
    var
    // ...
    jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context, rootjQuery);
    },

    jQuery.fn = jQuery.prototype = {
        init: function(selector, context, rootjQuery) {
            // ...
        }
    }
    jQuery.fn.init.prototype = jQuery.fn;

})(window);

估計有童鞋 jQuery.fn.init.prototype = jQuery.fn 這一句都會被卡主，滿臉黑人問號。但是這句真的算是 jQuery 的絕妙之處。理解這幾句很重要，分別解析一下：

（來自靈魂抽象派畫師-車大棒）

1、首先要明確，使用 $(‘xxx’) 這種實例化方式，其內部調用的是 return new jQuery.fn.init(selector, context, rootjQuery) 這一句話，也就是構造實例是交給了 jQuery.fn.init() 方法取完成。

2、將 jQuery.fn.init 的 prototype 屬性設置為 jQuery.fn，那么使用 new jQuery.fn.init() 生成的對象的原型對象就是 jQuery.fn ，所以掛載到 jQuery.fn 上面的函數就相當於掛載到 jQuery.fn.init() 生成的 jQuery 對象上，所有使用new jQuery.fn.init()生成的對象也能夠訪問到 jQuery.fn 上的所有原型方法。

3、也就是實例化方法存在這么一個關系鏈
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;
new jQuery.fn.init() 相當於 new jQuery() ;
jQuery() 返回的是 new jQuery.fn.init()，而 var obj = new jQuery()，所以這 2 者是相當的，所以我們可以無 new 實例化 jQuery 對象。

-------來自某博客大牛的小結（看到好多博客上面都有，不清楚誰才是原創）

PS：
原本這里打算把曬上我用思維箭頭圖畫出個整個結構之后，就基本上一句話可以帶過了。但是我看到別人博客上這一段總結很好，所以就直接引用了。當然寫博客的時候，我就料到直接引用可能會有點影響不好。修改一下，然后用自己語言來說，可能會效果好的多。

但是完全覺得沒有必要， 好東西我覺得就應該直接拿出來分享。事實上我本來的學習jQuery源碼就是吸收各種視頻資源，以及各路大牛博客去學習參考。別人寫的好，寫的詳細這就是無可厚非的。（如果有原話博客主，對我私自引用有意見。留言，我立刻刪或者改。）

jQuery的鏈式調用

早在第一次接觸jQuery的時候，就被它風騷的鏈式調用給吸引了，感覺操作真TMD的6到飛起。
例如：$('div').eq(0).show().end().eq(1).hide();

所以希望待會簡單的談及這個知識點之后，我不希望你們來一句：“大神，這波操作666！！”，而是高呼道：“what？這么簡單！”（PS：大牛們請無視這句話，還有不懂這兩句話差別的也請無視這句話！）

var oneDog = {
		food : function(){
			console.log("今天晚餐是泡面和一個鹵雞蛋！");
			return this;	
		},
		sad : function(){
			console.log("坐地鐵被喂了十幾站的狗糧！");
			return this;
		},
		game : function(){
			console.log("今天DOTA2開黑10連跪");
			return this;
		},
	}
	
	oneDog.food().sad().game();       //沒錯，這樣就是實現了鏈式調用。

然后控制台就能夠依次輸出每個方法當中的log語句，就是這么簡單每次調用返回它自己本身就可以形成一個鏈式調用。（來！開始喊那句話吧！）

看過前面的小demo之后，讓我們回過頭來看jQuery的源碼是如何實現鏈式調用。
首先第一步，顯示HTML骨架部分：

    <div>我是dog1</div>
    <div>我是dog2</div>

接下來就是jQuery代碼

console.log($(''div').eq(0))

這個時候控制台輸出結果：

之后在eq(0)后面緊緊跟end()結束的時候，然后相當於整個代碼返回給prevObject這個集合了：

//jQuery源碼當中的end函數
end: function() {
		return this.prevObject || this.constructor(null);
	}

總的來說，

1、eq(i) 之后留下prevObject 屬性，這個屬性記錄了操作的 jQuery 對象集合；

2、當我們在鏈式調用 end() 方法后，內部就返回當前 jQuery 對象的 prevObject 屬性，完成回溯。

3、和前面我們返回的this的小demo，有異曲同工之妙。

小結：

今天將的知識點比較少，先是帶大家回顧了prototype知識點，之后淺談了一下jQuery的無new的構造結構，以及鏈式調用的原理。

兩篇博客所講的知識完全沒有一些知名大牛博客一篇博客講的知識點多，但是哪怕能講懂一個點我也會很欣慰。有句話說的好：
不積跬步，無以至千里；不積小流，無以成江海。

原創文章，文筆有限，才疏學淺，文中若有不正之處，再次再次再次歡迎各位啪啪啪的打臉賜教。（有句話說的好，重要的詞得說三遍。）

我是車大棒，我的目標是星辰與大海！