DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js自執行函數的幾種不同寫法的比較
js自執行函數的幾種不同寫法的比較
編輯:關於JavaScript     
經常需要一個函數自執行,可惜這一種寫法是錯的:
復制代碼 代碼如下:
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);}());
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved