JS學習筆記：JS 的function( window, undefined ) {}(window)寫法

無盡深淵發表於2018-09-14
JS筆記FunctionUndefined

JS 的function( window, undefined ) {}(window)寫法

(function( window, undefined ) {})(window);
這個，為什麼要將window和undefined作為引數傳給它？

(function( $, undefined ) {})(jQuery); 同理

因為 ecmascript 執行JS程式碼是從裡到外，因此把全域性變數window或jQuery物件傳進來，就避免了到外層去尋找，提高效率。undefined在老一輩的瀏覽器是不被支援的，直接使用會報錯，js框架要考慮到相容性，因此增加一個形參undefined。

還有，不要用window.undefined傳遞給形參，有可能window.undefined被其他人修改了，最好就是甚麼都不傳，形參的undefined就是真正的undefined了。

Js程式碼 ： 
1 var undefined = 8;  
2 (function( window ) {   
3     alert(window.undefined); // 8  
4     alert(undefined); // 8  
5 })(window);

 

與
Js程式碼 ：  
1 var undefined = 8;  
2 (function( window, undefined ) {   
3     alert(window.undefined);  // 8  
4     alert(undefined); // 此處undefined引數為區域性的名稱為undefined變數，值為undefined  
5 })(window);

 

 

區分上述兩種方式：第一種每個語句都要去找一次window。第二種將window作為引數傳遞過去，是的不要每個語句都去找window，應該是提高了效率。 所以後者，就算外面的人把 undefined 定義了，裡面的 undefined 依然不受影響。大概是為了最大程度防止外界的變數定義對所做封裝的內部造成影響吧。

 原文參考自部落格https://www.cnblogs.com/ada-zheng/p/4174159.html

Js程式碼：   
 1 //方式一  
 2 (function(undefined ) {  
 3    window.property1 = ……;  
 4    window.property2 = ……;  
 5    ……  
 6 })();  
 7 //方式二  
 8 (function( window, undefined ) {  
 9     ... // code goes here  
10   
11 })(window);  
12 //方式三  
13 (function(undefined ) {  
14    var tmp = window;  
15    tmp.property1 = ……;  
16    tmp.property2 = ……;  
17    ……  
18 })();

 

 

方式一的效率明顯最低，方式二和方式三應該差不多。將window作為引數傳遞進去就可以讓程式碼裡面的語句可以直接用引數中的window，而不用再去找最外層的物件。假如要在函式中為window再設定 100000個屬性，用引數傳遞過去只需要找一次最外層物件。不用引數傳遞，用到window的語句都要去找一次最外層物件。

 

 

function ($, undefined){ })(jQuery)

 
規避使用者對undefined進行定義，致使函式發生異常
 
(function ($, undefined){ })(jQuery)
如果使用者
 
var undefined =xiaoyan；
(function ($, undefined){ })(jQuery) //這裡就可以傳個undefined的形參，避免上面的定義，只要沒傳值進去，undefined就不會被賦值

相關文章