【JavaScript】window與undefined做爲參數的做用

本文行文流程

1. 兩個大的信息來源：teacher與segmentfault論壇，以此分爲兩大板塊

2. 第一大板塊：一個普通的自調用函數==》加了各類參數的自調用函數==》參數的兩個做用==》類比到jQuery的源代碼封裝==》結論

3. 第二大板塊：論壇的問題==》論壇的被採納的回答==》簡易版的回答，回答中解釋了爲何要加上window,jquery,undefined.

From Teacher

演變歷程

1.原函數

(function(){
    console.log(1)
})()

2.加window參數

(function(window){
    console.log(window)
})(window)

此時的window不是全局變量，而是局部變量，雖然去打印的話，出來的效果是同樣的。

形參的位置能夠是其餘任意字符，反正傳進去的實參是window。
好比：

(function(w){
    console.log(w)
})(window)

3.函數執行-------做用一

(function(window){
    //函數內部是隔離的區域
    console.log(window)
})(window)

函數執行過程當中，若是能在參數處找到window,那麼就不會去全局做用域中找，因此結果就是：效率高，提高性能。（效率高==提高性能，多了一句廢話，可是也有助於理解）

4.代碼壓縮-------做用二

(function(w){
    //函數內部是隔離的區域
    console.log(w)
})(window)

說明：代碼打包上傳的時候，或者說代碼發佈的時候，也就是網站上線的時候，代碼會被壓縮，此時原本的形參是window，會被壓縮成一個字符w,這樣字符變少了，就節省了空間。

5.是否能夠不添加？天然是能夠的

(function(){
    //函數內部是隔離的區域
    console.log(window)
})()

說明：此時沒有傳window實參，形參也沒有傳，可是內部依然能夠訪問到window，由於window是全局變量，在哪裏均可以訪問到。

注意：此時尋找window去全局做用域中找，因此效率低一些；而且壓縮的時候window不會被壓縮，由於壓縮了瀏覽器就不認識了啊，無法解析了，因此這樣的參數就無法壓縮。

類比到jQuery

jQuery的封裝：jQuery源代碼的最外層就是這樣作的

1.jQuery源代碼的最外層就是這樣作的:傳入window與undefined

(function(window，undefined){
    //函數內部是隔離的區域
    console.log(window)
})(window)

2.一個事實：早期的瀏覽器中undefined能夠修改，新版本瀏覽器不能修改了

undefined=123;
    console.log(undefined);//結果是123；如今的結果仍是undefined

3.jQuery源代碼作法的優勢：

更嚴謹，不管是什麼瀏覽器，裏邊的undefined都不會被更改。由於函數尋找的時候會優先找到做爲參數傳過來的undefined，而不會去全局找。

當心得：學任何技術不要侷限於怎麼用，而要刨根問底的看是怎麼實現的。這樣進步會更快。

---

結論

window做爲實參的用意：提升性能；方便代碼壓縮。
undefined做爲形參的用意：防止undefined的值被修改（早期的低版本瀏覽器中）。最新的瀏覽器已經把這個bug修復了。

From 論壇

問題：像下邊這樣的代碼爲何要把window, jQuery對象傳進去

(function (window, $, undefined) {
    play=function(){
        $("#demo").val("This is a demo.");
    }


    window.wbLogin = play;
})(window, jQuery);

1 論壇被採用的回答

爲何要傳入 jQuery

經過定義一個匿名函數，建立了一個「私有」的命名空間，該命名空間的變量和方法，不會破壞全局的命名空間。這點很是有用也是一個 JS 框架必須支持的功能，jQuery 被應用在成千上萬的 JavaScript 程序中，必須確保 jQuery 建立的變量不能和導入他的程序所使用的變量發生衝突。

爲何要傳入 window

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

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

爲何要傳入 undefined

在自調用匿名函數的做用域內，確保 undefined 是真的未定義。由於 undefined 可以被重寫，賦予新的值。

undefined = "now it's defined";
alert( undefined );

瀏覽器測試結果：

瀏覽器 測試結果 結論
ie11 undefined 不能改變
firefox22 undefined 不能改變
chrome31 undefined 不能改變
opera12 undefined 不能改變

2 論壇簡易版本回答

一句話，使全局變量以參數形式變成自執行函數內部的局部變量。

至於爲何這麼作，提升程序效率。爲何能提升效率，得從javascript的機制提及，所謂的scope chain做用域鏈，在當前做用域中若是沒有該屬性（局部變量）則向上一層做用域中尋找，一直到最上層，也就是window。也就是說全局變量和下級做用域都是window的一個屬性，向下依此類推。

另外jQuery傳入後將參數寫成$能夠保證在此函數內$爲jquery而不是其餘相似使用$符號的庫。

undefined同理，因爲沒有傳入第三個參數，天然就是undefined。因爲javascript中undefined是一個變量，能夠被改變，因此這樣能夠保證undefined判斷時的準確性。有時判斷時使用typeof xxx === 'undefined'也是由於這個緣由。