js 立即調用的函數表達式如何寫

2019-11-20 21:16:07

字體：大中小

來源：轉載

供稿：網友

如果不需要顯示調用函數，讓這個函數在定義的時候就執行的話，該如何寫才可以呢,接下來將詳細介紹實現步驟，感興趣的朋友可以了解下

1.前言
函數需要先定義，后使用。這基本上所有編程語言的一條鐵的定律。
一般狀況下，我們需要調用一個JavaScript 函數, 基本的狀況都是先定義，然后再調用。看一個例子
代碼如下:

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Say Hello</title> 
</head> 
<body> 
<script> 
//define function 
function sayHello() 
{ 
alert("hello"); 
} 
//call function 
sayHello(); 
</script> 
</body> 
</html> 

但是如果不需要顯示調用函數，讓這個函數在定義的時候就執行的話，該如何寫才可以呢？

2.思考的歷程
從以上的例子來看，聰明的你結合以上的使用狀況可能會想：
===》既然調用的時候是在函數名后面加上一對是否在function 定義的后面加上一對大括號是否就可以執行了呢？像以下這樣：
代碼如下:

復制代碼代碼如下:

 
function sayHello() 
{ 
alert("hello"); 
}(); 

不幸的是，以上的寫法會報出js 的語法錯誤。
因為Javascript 的解析器在解析器解析全局的function或者function內部function關鍵字的時候，默認會把大括號解析成function聲明，而不是function表達式。

也就是說，會把最后的一對大括號默認解析成一個缺少名字的function，并且拋出一個語法錯誤信息，因為function聲明需要一個名字。

===》你可能又會想，如果我在大括號中傳入參數是否就會解析成表達式了呢？
代碼如下:

復制代碼代碼如下:

 
function sayHello() 
{ 
alert("hello"); 
}(1); 

的確，錯誤是沒有了。但是以上的寫法等同于以下寫法的效果
代碼如下:

復制代碼代碼如下:

 
function sayHello() 
{ 
alert("hello"); 
}; 
(1); 

這兩句完全沒有關系，函數還是不會執行

3.正確的寫法
對于JavaScript 來說，括弧()里面不能包含語句，所以在這一點上，解析器在解析function關鍵字的時候，會將相應的代碼解析成function表達式，而不是function聲明所以，只要將大括號將代碼(包括函數部分和在后面加上一對大括號)全部括起來就可以了。
代碼如下:

復制代碼代碼如下:

 
(function sayHello() 
{ 
alert("hello"); 
}()); 

還有一種寫法也可以，就是將后面的大括號移出來， as
代碼如下:

復制代碼代碼如下:

 
(function sayHello() 
{ 
alert("hello"); 
})(); 

推薦是使用第一種方式。
但是目前很多比較好的js library 使用的都是第二種方式。
比如： web 圖形繪制的: git , draw2d ,....

上一篇：ie8本地圖片上傳預覽示例代碼

下一篇：IE的事件傳遞-event.cancelBubble示例介紹

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注