js中的立即執(zhí)行函數(shù)

zhunjiee 發(fā)布于2019-08-21 10:55 / 2748人閱讀

摘要：匿名函數(shù)的好處在于可以減少局部變量，以免污染現(xiàn)有的運(yùn)行環(huán)境。另外通過(guò)，這三個(gè)符號(hào)運(yùn)行的匿名函數(shù)比運(yùn)行的匿名函數(shù)可以減少一個(gè)字符的使用但是我們通常使用加因?yàn)槠渌牟僮鞣赡軙?huì)帶來(lái)其他的影響更多可以參考

js中的立即執(zhí)行函數(shù)

( function(){…} )()和( function (){…} () )是兩種javascript立即執(zhí)行函數(shù)的常見寫法

問題:

為什么會(huì)出現(xiàn)上面的兩種不一樣的寫法,上面的寫法難道不是簡(jiǎn)單的就是一個(gè)括號(hào)包裹匿名函數(shù)對(duì)象,再在后面加個(gè)括號(hào)調(diào)用函數(shù)，最后達(dá)到函數(shù)定義后立即執(zhí)行的目的????然而并不是我想的那么簡(jiǎn)單

除了這兩種常用的方式:
(function(){ //do something here;  })();
( function (){//do something here; }}());

還有一種方式為：
!function(){  // do something  }();

在這里開頭要加上！或者 ~ , - 和 +。（都是英文符號(hào)）
為什么這里要這樣子,為什么要在前面加上（）、！、+、-、=等運(yùn)算符????

因?yàn)?JavaScript 文法明確規(guī)定表達(dá)式語(yǔ)句不得以 function 或者 { 
為開頭（http://es5.github.io/#x12.4）

ExpressionStatement → [lookahead ? {{, function}] Expression;

好的現(xiàn)在帶來(lái)更多的困惑了......

首先想要明白這個(gè)問題需要弄清函數(shù)表達(dá)式（function expression）和函數(shù)聲明（function declaration）的區(qū)別：

函數(shù)表達(dá)式：

函數(shù)表達(dá)式中的函數(shù)可以為匿名函數(shù)，也可以有函數(shù)名，但是該函數(shù)實(shí)際上不能直接使用，只能通過(guò)表達(dá)式左邊的變量 a 來(lái)調(diào)用。

var a = function(){
alert("Function expression");
};
var b = new a();

函數(shù)聲明：

// 函數(shù)聲明時(shí)必須有函數(shù)名

function a(){
alert("Function declaration");
}
a();

下面來(lái)看一下這段代碼：

~function() { 
console.log("hi"); 
} ();

實(shí)際上可以分為兩個(gè)部分（~function() { console.log("hi")} 和()部分）前面部分的匿名函數(shù)通過(guò)一元操作符變成了函數(shù)表達(dá)式，因而可以通過(guò)在表達(dá)式的后面使用（）來(lái)執(zhí)行。

因此，執(zhí)行匿名函數(shù)可以通過(guò)+，-，！，（）這里的括號(hào)也是一種運(yùn)算符,稱為分組運(yùn)算符
這樣的形式來(lái)轉(zhuǎn)化為函數(shù)表達(dá)式，就可以通過(guò)表達(dá)式的后面使用（）來(lái)執(zhí)行

一些其他的寫法:

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

下面看一個(gè)組錯(cuò)誤的的現(xiàn)象:

function (){console.log("hi")}();
VM354:1 Uncaught SyntaxError: Unexpected token )

function g(){ console.log("hi")}();
VM519:1 Uncaught SyntaxError: Unexpected token )

(1) function (){ }()

期望是立即調(diào)用一個(gè)匿名函數(shù)表達(dá)式，結(jié)果是進(jìn)行了函數(shù)聲明，函數(shù)聲明必須要有標(biāo)識(shí)符做為函數(shù)名稱,而這里用()來(lái)做為標(biāo)識(shí)符是非法的.

(2) function g(){ }()

期望是立即調(diào)用一個(gè)具名函數(shù)表達(dá)式，結(jié)果是聲明了函數(shù) g。末尾的括號(hào)作為分組運(yùn)算符，必須要提供表達(dá)式做為參數(shù)。

function g(){ console.log("hi")}(1);
>1

所以那些匿名函數(shù)附近使用括號(hào)或一些一元運(yùn)算符的慣用法，就是來(lái)引導(dǎo)解析器，指明運(yùn)算符附近是一個(gè)表達(dá)式。

匿名函數(shù)的好處在于：可以減少局部變量，以免污染現(xiàn)有的運(yùn)行環(huán)境。jQuery等庫(kù)都用到了這樣的原理。
另外：通過(guò)+，-！這三個(gè)符號(hào)運(yùn)行的匿名函數(shù)比（）運(yùn)行的匿名函數(shù)可以減少一個(gè)字符的使用,但是我們通常使用加(),因?yàn)槠渌牟僮鞣赡軙?huì)帶來(lái)其他的影響

更多可以參考
ECMA-262-3 in detail. Chapter 5. Functions.