search
[JavaScript] 即刻調用的函式運算式 ( IIFE ) - Carlos-Studio

[JavaScript] 即刻調用的函式運算式 ( IIFE ) - Carlos-Studio

此篇文章瀏覽量: 90

IIFE 的全文是 immediately invoked function expression。如果我們有一段程式碼希望馬上的被執行,那這個就可以派上用場。

匿名函式與具名函式

看以下程式,第一個是匿名函式,第二個是具名函式:

var foo = function(){
  // 匿名函式裡的其它程式
};

var x = function bar() {
  // 具名函式裡的其它程式
};

這兩個函式,如果要被執行,就可以使用以下方式:

foo();
x();

那麼 IIFE 呢?

即刻調用的函式運算式 IIFE

我們可以寫一個程式如下,在瀏覽器解讀時,函式裡的原始碼會馬上地被執行

(function IIFE(){
  console.log('嗨!');
})();

( function(){…} ) 左邊粗斜體括號,只是 JS 文法中的一個細節,它被用來避免函式被視為一個階通的函式宣告。
然而最後運算式結尾處的 ( ) 括號,會實際執行前面的函式。

當然也可以不用給定函式名稱,直接這樣寫:

(function (){
  console.log('嗨!');
})();

用途

以這種方式來運用 IIFE 通常是為了宣告不會影響到 IIFE 外部程式碼的變數,例:

var x = 10;
(function(){
  var x = 20;
  console.log(x); // 輸出 20
})();
console.log(x); // 輸出 10

當然 IIFE 也能夠有回傳值:

var a = (function(){
  return 42;
})();
console.log(a); // 輸出 42

若覺得文章有幫助,請多分享,讓其他同好也能吸收網站技能知識。

熱門推薦

本文由 Carlos Chang 提供 原文連結

Carlos Chang
寫了487篇文章,獲得0次喜歡
留言回覆
回覆
精彩推薦