車大棒淺談jQuery源碼（一）

背景

由於最近辭職找工做，投了許多家公司。結果簡歷要麼石沉大海，一點音訊都沒有，要麼就是郵件回覆說不匹配。後面加了一些QQ羣，才發現原來我工做經驗年限太少了。如今深圳都是3經驗起步，北京聽說更加恐怖。

宅居在出租房中發愁的時候，看到羣裏大神說若是在簡歷上加上一句熟讀jquery源碼+vue源碼，那麼3年經驗就再也不是一個問題，說到底仍是能力不夠。

當時感受心中爲之一怔，因而開始一邊看源碼一邊作筆記，纔有這個博客的開始。

老王："上網搜搜jQuery源碼，一大把源碼資料講解。你這個博客不會直接是複製粘貼，源碼註釋流吧？那你的博客有啥看頭！"

車大棒；'咳咳！！老王你又過來砸場子這樣很差吧！固然今天你又砸到鋼板了，做爲一名前端段子手我會給讀者複製粘貼看代碼註釋嗎？'

我但是一條有夢想的鹹魚！

匿名函數

函數的建立

在瞭解什麼是匿名函數以前，讓咱們先來上一段建立函數最多見的的形式。

var Hello = function(){
    do something......
}

這種形式看起來好像是常規變量的賦值語句，即建立一個函數並將它賦值給變量Hello。這種狀況下建立的函數叫作匿名函數（annoymous function），由於function關鍵字後面沒有標識符。

那麼問題來了，若是不用一個變量去接受這個匿名函數。那麼如何才能調用這個匿名函數呢？

匿名函數自調用

說到匿名函數自調用，有的小夥伴可能就會嘗試直接單獨把function拿出來，而後再調用。

function(){console.log(1)}()        //驗證猜測

那麼接下來讓咱們輸出這行代碼，看瀏覽器是否正常的解析這行代碼。而後成功的在控制檯輸出數字1

結果瀏覽器很不給面子的解析失敗，還給你報出一串紅色警告字符。是否是感受很委屈，恐怕瀏覽器才委屈吧。由於你沒有按照瀏覽器的規則來，瀏覽器固然會不給面子給你紅色警告。

道理其實很簡單，當js編譯器開始執行的時候，遇見function以後。看到它周圍沒有任何東西。因而就把function關鍵字解析成函數聲明，所以致使後面運行出錯了。
原文地址：https://stackoverflow.com/questions/13341698/javascript-plus-sign-in-front-of-function-name

這個時候咱們只須要用一個括號把這個匿名函數包裹起來，避免js編譯器將function關鍵字解析成函數聲明，而後代碼就可以正常執行。

匿名函數調用非主流的寫法

固然除了主流經常使用的函數自調用寫法，仍是有其餘非主流的寫法。

同理由於function前面有這些運算符，所以js編譯器就把後面的匿名函數看成一個總體，沒有將關鍵字function去解析。

可是既然是非主流的寫法，就確定會存在淪爲非主流寫法所帶來的坑。仍是前面的代碼，我分開輸出並在每行裏面添加一個return 1.結果每一行出現的結果各不相同。

這是由於匿名函數也是一種值，這些運算符會將後面的函數體當成一個總體，先對匿名函數進行求值，而後在對結果進行運算。

因此在使用這些非主流的函數自調用寫法要注意這些坑，別由於追求個（裝）性（B）而致使後面出現問題就尷尬了。

jQuery：匿名自執行函數

當咱們打開jQuery源碼的時候，前面提到主流的匿名函數結構一會兒呈現眼前。

(function( window, undefined ) {
    // jquery code
})(window);

爲何要傳入window呢？

經過傳入window變量，使得window由全局變量變爲局部變量，當在jQuery代碼塊中訪問window時，不須要將做用域鏈回退到頂層做用域，這樣能夠更快的訪問window；這還不是關鍵所在，更重要的是，將window做爲參數傳入，能夠在壓縮代碼時進行優化，看看jQuery壓縮代碼：

(function(a,b){})(window);               // window 被優化爲 a

能夠被修改的undefined

衆所周知undefined屬於JavaScript基本數據類型中的一種類型，undefined
是全局對象的屬性即它是全局範圍的變量。初始值undefined是原始值。
可是在ES5規範以前，undefined是能夠被定義。

undefined = "one Dog"
alert(undefined)                      // 不遵照ES5規範的瀏覽器就會輸出one dog

原本我還在想去哪裏找不遵照ES5版本的瀏覽器，結果就想起來IE。因而通過測試IE六、IE七、IE8所有都可以彈出"one Dog"

由於undefined可以被重寫，賦予新的值。因此早期jQuery在自調用匿名函數 的做用域內，爲了確保undefined是真的未定義。（早期但是IE天下）

爲何jQuery採用匿名函數

採用匿名函數自執行，就能夠造成一個巨大的做用域。裏面擁有不少不用擔憂被污染的局部變量，以後只須要開放暴露一個接口就能夠了。

好吧，估計在這裏有人就開始有一點頭暈了。沒有關係，讓咱們迴歸到舉栗子環節當中：

(function( window, undefined ) {
   var $ =  "車大棒"；
})(window);
console.log($)

如上一個匿名函數造成了一個做用域，而後$符就是其中的局部變量。這個時候若是咱們直接去拿這個$變量，console.log($)那麼瀏覽器確定會報以下錯。

那麼這個時候，我就經過暴露接口，讓外面能夠經過接口直接訪問到這個$這個變量。

(function( window, undefined ) {
   var $ =  "車大棒";
    window.$ = $;
})(window);
console.log($)

那樣便可以成功訪問到這個我定義的局部變量$

同理jQuery源碼裏面也是如此，經過window去暴露一個接口。

是否是感受，我嚓！這麼簡單粗暴！（額，不簡單粗暴點估計大家都不肯意看了）

小結：

本節主要是對於一個匿名函數的小結，經過研究jQuery源碼從而間接的幫助你們溫習和回顧之前的JavaScript知識點。
原創文章，文筆有限，才疏學淺，文中如有不正之處，歡迎各位啪啪的打臉賜教。

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