首頁 >web前端 >js教程 >js自執行函數的幾種不同寫法的比較_javascript技巧

js自執行函數的幾種不同寫法的比較_javascript技巧

WBOY
WBOY原創
2016-05-16 17:50:441211瀏覽

常常需要一個函數自執行,可惜這一種寫法是錯的:

複製程式碼 程式碼如下:


程式碼如下:


function(){alert(1);}();

原因是前半段「function(){alert(1);}」當成了函數聲明,而不是一個函數表達式,從而讓後面的「();」變得孤立,產生語法錯。 依照上面的分析,這段程式碼雖說沒有語法錯,但也是不符合我們的預期的,因為這個函數並沒有自執行。
複製程式碼


程式碼如下:


function(){alert(1);}(1 );


綜上,癥結在於,如何明確程式碼描述的是一個函數表達式,而不是函數宣告語句。
正確的寫法多種多樣,也各有利弊:
方法1:最前最後加括號
複製代碼


程式碼如下:


(function(){alert(1);}());

這是jslint推薦的寫法,好處是,能提醒閱讀程式碼的人,這段程式碼是一個整體。 例如,在有語法高亮匹配功能的編輯器裡,光標在第一個左括號後時,最後一個右括號也會高亮,看代碼的人一眼就可以看到這個整體。 不過,對於某些寫程式碼不喜歡在行後加分號的同學,也會形成一些坑坑,例如以下程式碼會報運行錯:
複製程式碼


程式碼如下:

var a=1
(function(){alert(1);}());

方法2:function外面加括號
複製代碼


代碼如下:


(function(){alert(1);})();

這種做法比方法1少了一個程式碼整體性的好處。 方法3:function前面加運算符,常見的是!與void 。
複製程式碼


程式碼如下:

!function(){alert(1);}( );
void function(){alert(2);}();



顯然,加上「!」或「 」等運算符,寫起來是最簡單的。
加上「void 」要敲五下鍵盤,但聽說有一個好處是,比加"!"少一次邏輯運算。 ----我只是聽說,不明所以。 最後,代表我個人,強烈支持方法1,即jslint的推薦寫法:
複製程式碼


複製程式碼 程式碼如下: (function(){alert(1);}());
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn