前言

js立即執(zhí)行函數(shù)可以讓你的函數(shù)在創(chuàng)建后立即執(zhí)行，js立即執(zhí)行函數(shù)模式是一種語法，可以讓你的函數(shù)在定義后立即被執(zhí)行，這種模式本質(zhì)上就是函數(shù)表達(dá)式(命名的或者匿名的)，在創(chuàng)建后立即執(zhí)行。

( function(){…} )()和( function (){…} () )是兩種javascript立即執(zhí)行函數(shù)的常見寫法，最初我以為是一個(gè)括號(hào)包裹匿名函數(shù)，再在后面加個(gè)括號(hào)調(diào)用函數(shù)，最后達(dá)到函數(shù)定義后立即執(zhí)行的目的，后來發(fā)現(xiàn)加括號(hào)的原因并非如此。

下面話不多說了，來一起看看詳細(xì)的介紹吧。

通常我們聲明一個(gè)函數(shù)有以下幾種方式：

// 聲明函數(shù)f1
function f1() {
 console.log("f1");
}
// 通過()來調(diào)用此函數(shù)
f1();


//一個(gè)匿名函數(shù)的函數(shù)表達(dá)式，被賦值給變量f2:
var f2 = function() {
 console.log("f2");
}
//通過()來調(diào)用此函數(shù)
f2();


//一個(gè)命名為f3的函數(shù)的函數(shù)表達(dá)式(這里的函數(shù)名可以隨意命名，可以不必和變量f3重名)，被賦值給變量f3:
var f3 = function f3() {
 console.log("f3");
}
//通過()來調(diào)用此函數(shù)
f3();

如果你看過一些自定義控件的話你會(huì)發(fā)現(xiàn)他們大多數(shù)都是沿用這種寫法：

(function() {
 ```
 // 這里開始寫功能需求
 })(); 

這是我們常說的立即執(zhí)行函數(shù)(IIFE)，顧名思義，也就是說這個(gè)函數(shù)是立即執(zhí)行函數(shù)體的，不需要你額外去主動(dòng)的去調(diào)用，一般情況下我們只對(duì)匿名函數(shù)使用IIFE，這么做有兩個(gè)目的：

     一是不必為函數(shù)命名，避免了污染全局變量

     二是IIFE內(nèi)部形成了一個(gè)單獨(dú)的作用域，可以封裝一些外部無法讀取的私有變量。

如果看到這兩句話無法理解，那么先從IIFE的運(yùn)行原理說起。

因?yàn)镮IFE通常用于匿名函數(shù)，這里就用簡(jiǎn)單的匿名函數(shù)作為栗子：

var f = function(){
 console.log("f");
}
f();

我們發(fā)現(xiàn)這里f只是這個(gè)匿名函數(shù)的一個(gè)引用變量，那么既然f()能夠調(diào)用這個(gè)函數(shù)，我把f替換成函數(shù)本身可以么：

function(){
 console.log("f"); 
}();

運(yùn)行之后得到如下結(jié)果：

Uncaught SyntaxError: Unexpected token (

產(chǎn)生這個(gè)錯(cuò)誤的原因是，Javascript引擎看到function關(guān)鍵字之后，認(rèn)為后面跟的是函數(shù)聲明語句，不應(yīng)該以圓括號(hào)結(jié)尾。解決方法就是讓引擎知道，圓括號(hào)前面的部分不是函數(shù)定義語句，而是一個(gè)表達(dá)式，可以對(duì)此進(jìn)行運(yùn)算，這里區(qū)分一下函數(shù)聲明和函數(shù)表達(dá)式：

1、函數(shù)聲明(即我們通常使用function x(){}來聲明一個(gè)函數(shù))

function myFunction () { /* logic here */ }

2、函數(shù)表達(dá)式(類似以這種的形式)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

小學(xué)我們就學(xué)過用()括起來的表達(dá)式會(huì)先執(zhí)行，就像下面這樣：

1+(2+3) //這里先運(yùn)行小括號(hào)里面的內(nèi)容沒有意見撒

其實(shí)在javascript中小括號(hào)也有相似的作用，Javascript引擎看到function關(guān)鍵字會(huì)認(rèn)為是函數(shù)聲明語句，那么如果Javascript引擎優(yōu)先看到小括號(hào)會(huì)怎么樣：

//用小括號(hào)把函數(shù)包裹起來
(function(){
  console.log("f");  
})();

函數(shù)成功執(zhí)行了：

f //控制臺(tái)輸出

這種情況下Javascript引擎就會(huì)認(rèn)為這是一個(gè)表達(dá)式，而不是函數(shù)聲明，當(dāng)然要讓Javascript引擎認(rèn)為這是一個(gè)表達(dá)式的方法還有很多：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有傳遞參數(shù)時(shí)，才需要最后那個(gè)圓括號(hào)。
……

回到前面的問題，為什么說IIFE這種形式避免了污染全局變量，如果你見過別人寫的jquery插件，里面通常會(huì)有類似這樣的代碼：

(function($){
  ```
  //插件實(shí)現(xiàn)代碼
})(jQuery);

這里的jquery其實(shí)是該匿名函數(shù)的參數(shù)，聯(lián)想一下我們調(diào)用匿名函數(shù)時(shí)候是用f()那么匿名帶參數(shù)的就是f(args)對(duì)吧，這里把jquery作為參數(shù)傳入該函數(shù)，那么在函數(shù)內(nèi)部使用形參$的時(shí)候就不會(huì)影響到外部環(huán)境，因?yàn)橛行┎寮矔?huì)用到$這個(gè)限定符，你在這個(gè)函數(shù)內(nèi)部可以隨意折騰。

以上，在此過程中參考了以下兩篇文章：

javascript立即執(zhí)行某個(gè)函數(shù)：插件中function(){}()再思考

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論