立即執行函數(function(){})()

關鍵詞: 立即執行函數 匿名函數 作用域

格式: (function())()

作用: 立即執行函數(function())()是匿名函數, 主要利用函數的作用域, 減少全局變數的使用

解釋

前提知識

js中的函數通常有兩種命名方式,分別是 聲明式函數 和 函數表達式

// 聲明式函數
function func() {}
// 函數表達式
const func = function() {}

分析

1. 當我們的有些簡單函數只執行一次的時候,我們通常會這麼做

   // 聲明式函數
   function func () {console.log('I am a cat')}
   func() // I am a cat
   // 表達式函數
   const func = function () {console.log('I am a cat')} // 方法1
   func() // I am a cat
   const func = function () {console.log('I am a cat')} () // 方法2
   func // I am a cat
   

2. 這時候我們會註意到函數的調用都要用到函數名, 那麼如果我們不想要這個函數名呢?
   可以發現函數表達式 方法2 中在函數聲明的時候直接將函數結果返回給了變數 func, 並且在調用變數 func 的時候成功返回結果.
   那麼是否可以這樣理解, 直接使用function () {console.log('I am a cat')}就可以實現我們的目的?

   function () { console.log('I am a cat')} () // Function statements require a function name
   

3. 失敗了? 函數需要一個函數名!

4. 這是因為當我們直接使用function () {console.log('I am a cat')}的時候, js解釋器會認為我們的函數是一個聲明式函數, 而非表達式函數. 因此必須使用一些特殊手段,讓js解釋器認出我們應該是函數表達式. 這樣的方法有很多,最常見的莫過於以下寫法. 這也是我最推薦的寫法

   (function () {console.log('I am a cat')}) () // I am a cat
   

其他寫法

// 知道即可，防止遇見了不認識
!function () {}();
~function () {}();
-function () {}();
+function () {}();
void function () {}();
(function () {}());
(function () {})();
// ES6 箭頭函數
(()=>{})()