iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

用30天了解javascript系列 第 17

[用30天了解javascript]Day17.立即函式(IIFE)

  • 分享至 

  • xImage
  •  
  • 可立刻執行的匿名函式,函式名稱可寫可不寫

  • 無法在函式外再次執行

    (function IIFE() {
      console.log("立即函式");
    })();
    
    console.log(IIFE); //會跳錯
    
  • 立即函式的最後一定要加分號( ; ),ASI 會誤以為是一行而報錯

    (function(){
        console.log('a');
    })()
    
    (function(){
        console.log('b');
    })()
    

    https://ithelp.ithome.com.tw/upload/images/20200930/20112053zZR9ECBTtP.png

IIFE寫法有兩種

//1.括號在內
(function () {
    console.log('小括號在函式結尾的後面');
}());

//2.括號在外
(function() {
    console.log('小括號在外面');
})();
//一般函式呼叫
var nameFunc = function(){
	return "Jay";
}
console.log(nameFunc); //輸出nameFunc變數值
console.log(nameFunc()); //呼叫nameFunc函式

https://ithelp.ithome.com.tw/upload/images/20200930/20112053iHVzvZJrj7.png
輸出變數nameFunc,nameFunc已被指派一個函式,所以傳回函式本身;執行nameFunc()時,傳回Jay。

//IIFE呼叫
//函式名稱可寫可不寫
var nameFunc = function(){
	return "Jay";
}();
console.log(nameFunc); //輸出nameFunc變數值
console.log(nameFunc()); //呼叫nameFunc函式

https://ithelp.ithome.com.tw/upload/images/20200930/20112053xh2MhmUNhj.png
nameFunc變數只儲存函式執行結果,不是函式本身。因此nameFunc會印出Jay;nameFunc是個變數,型別會依照函式傳回資料型別的轉換,因此呼叫nameFunc()會 is not a function錯誤訊息。

使用IIFE的好處是

  • 減少全域變數的產生,也避免變數名稱產生衝突
  • 全域變數區域化,在函式結束後會被銷毀,減少記憶體佔用,效能上有些微的提升

上一篇
[用30天了解javascript]Day16.函式
下一篇
[用30天了解javascript]Day18.閉包
系列文
用30天了解javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言