tags: ItIron2021 Javascript

前言

終於邁入第10天啦! 我們昨天講完資料型別的最後一道題目了，今天再次換換口味吧! 這次的主題我想你也不會陌生，篇幅會相當的短，可以放心閱讀?

本日題目與解釋

請你解釋什麼是IIFE

防雷圖又來囉，坦白說我的存貨快用完了，是該補充一點備用

IIFE是Immediately Invoked Function Expression，也就是立即執行函數!

好了，今天就到此為止，我們明天見囉!

拜託你在面試時不要只回答這樣就結束了，除了回答它就是一個會馬上執行的函數之外，我們可以從幾個點切入作進一步的說明。

1. 要怎麼寫一個立即執行函數

IIFE有幾個常見的寫法，最傳統的就是配合匿名函數的寫法，注意整個函數被一組小括號(parentheses)包裹，最終在透過另一組小括號呼叫執行。

(function() {
  console.log('你好，我是丹尼，我喜歡狗但我不是狗')
} 
)()

// 毫不令人意外的輸出結果
你好，我是丹尼，我喜歡狗但我不是狗

當然你也可以配合箭頭函數再讓它更精簡一點

(() => {
  console.log('你好，我是丹尼，我喜歡狗但我真的不是狗')
} 
)()

// 毫不令人意外的輸出結果
你好，我是丹尼，我喜歡狗但我真的不是狗

同樣的也可以傳入參數

((animal) => {
  console.log(`你好，我是丹尼，其實我也不討厭${animal}`)
} 
)('貓')

// 毫不令人意外的輸出結果
你好，我是丹尼，其實我也不討厭貓

最後就是具名的寫法，IIFE並不僅限於匿名函數的寫法

(function demo() {
  console.log('你好，我是丹尼，我喜歡狗但我不是狗')
} 
)()

// 毫不令人意外的輸出結果
你好，我是丹尼，我喜歡狗但我不是狗

2. 使用IIFE有什麼好處

通常這才是面試官真正想要知道的，尤其是扯到名詞的定義時，後來多半都會問到為什麼我們需要這玩意! 使用IIFE最主要的優點為

• 避免變數的汙染
  這一點相對好懂一些，IIFE一旦執行完後就會被pop出目前的stack，裡面的變數就與外面沒有任何關係了。這表示在專案規模變大或是你採用大量第三方套件時不至於出現變數的衝突導致一些意外的錯誤。

當然，其他還有像是記憶體的使用優化或是可以配合閉包達到保護作用域內的變數(這其實是閉包的優點)等等，有興趣的朋友可以繼續往下鑽，但至少要能回答出這個最主要的優勢。

本日核心觀念與總結

核心觀念

IIFE

總結

• 理解什麼是IIFE
• 了解如何寫一個IIFE
• 了解IIFE最核心的用途

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!