JavaScript中的匿名函式、立即執行函式和閉包

阿新 • • 發佈：2022-04-06

匿名函式是沒有函式名的，不能單獨使用；

立即執行函式是基於匿名函式實現的，也沒有函式名，會在定義後立即執行；

閉包是有權訪問另一個函式作用域中的變數的函式。匿名函式、立即執行函式只要滿足有權訪問另一個函式作用域中的變數這一個條件，就成了閉包。

匿名函式

匿名函式：沒有函式名的函式

匿名函式不能單獨定義與使用

function foo() {
  console.log('普通函式');
}
// 去掉函式名 foo 
function () { // SyntaxError: Function statements require a function name
  console.log('匿名函式');
}

匿名函式的應用場景

用於函式表示式
作為返回值
用於定義物件方法
作為回撥函式
用於立即執行函式
用於DOM元素註冊事件
其他 ...

用於函式表示式

var sum = function (num1, num2) {
  return num1 + num2;
};
console.log(sum(2, 3));

作為返回值

function sum(sum1, sum2) { 

  return function() {
    return sum1 + sum2;    
  }

}
console.log(sum(2, 3));    // [Function]
console.log(sum(2, 3)());  // 5

用於定義物件方法

var obj = {
  name: 'uakora',
  age: 27,
  foo: function() {
    console.log(this.name + ' ' + this.age);
  }
};
obj.foo(); // uakora 27

作為回撥函式

setTimeout(function() {
  console.log('匿名函式作為回撥函式');
}, 1000);

用於立即執行函式

(function() {
  console.log('立即執行函式是基於匿名函式建立的');
}());

用於DOM元素註冊事件

<input type="button" value="Click me！" id="btn">
<script>
    var btn = document.querySelector("#btn");
    //給按鈕註冊點選事件
    sub.onclick = function(){
        console.log('Click event');
    }
</script>

立即執行函式

立即執行函式(IIFE，Immediately-Invoked Function Expression)，是一種在定義後就會立即執行的函式，其實質是一種語法。

立即執行函式的形式

兩種常用形式

常用形式一：將匿名函式包裹在一個括號運算子中，後面再跟一個括號

(function () {
  console.log('立即執行函式');
})(); // !!!特別說明：若此立即執行函式後面立馬又跟著一個立即執行函式，一定要在結尾加分號，否則後面的立即執行函式會報錯！

// 上一個立即執行函式不加分號，下行程式碼將報錯：TypeError: (intermediate value)(...) is not a function
(function (a, b, c) { // 形參
  console.log(a + b + c);  // 6
})(1, 2, 3); // 實參

常用形式二：匿名函式後面跟一個括號，再將整個包裹在一個括號運算子中

(function () {
  console.log('立即執行函式');
}());

(function (a, b, c) { // 形參
  console.log(a + b + c);  // 6
}(1, 2, 3)); // 實參

其他形式

可以用 !、+、-、~ 運算子代替常用形式一中的第一個括號

!function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

+function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

-function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

~function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

立即執行函式的作用

立即執行函式最本質的作用是：建立一個獨立的作用域。利用這一功能，可以

初始化資料和頁面（只執行一次）
模組化開發中，定義私有變數，防止汙染全域性（獨立作用域）
解決閉包中的狀態儲存問題；（常見的一個函式內部返回多個函式，呼叫這些函式，列印父函式內部變數的問題）

案例分析

var liList = document.getElementsByTagName('li');
for(var i = 0; i < liList.length; i++) {
  liList[i].onclick = function() {
    alert(i); // 結果：alert 出來的總是 6, 而不是0、1、2、3、4、5
  }
}

期望結果：0、1、2、3、4、5
實際結果：alert 出來的總是 6
原因分析：沒有形成獨立作用域，每次點選執行函式都是去訪問同一個 i 值（且是迴圈結束後的值 6）
解決方案：使用立即執行函式為每個 li 元素的點選事件函式建立獨立作用域

var liList = document.getElementsByTagName('li');
for (var i = 0; i < 6; i++) {
  (function (i) {
    liList[i].onclick = function () {
      alert(i); // 0、1、2、3、4、5
    }
  })(i);
}

資源搜尋網站大全 http://www.szhdn.com

閉包

閉包是指有權訪問另一個函式作用域中的變數的函式。建立閉包的常見方式，就是在一個函式內部建立另一個函式。閉包可以有函式名，也可以是匿名函式(沒有函式名)；

閉包形式一：直接以匿名函式的形式作為外部函式的返回值（普遍用法）

function outer() {
  var n = 1;

  return function() {
    n++; // 訪問 outer 函式作用域中的變數 n，形成閉包
    console.log(n);
  }
}

outer()();

閉包形式二：在外部函式內定義一個內部函式，並返回內部函式名

function outer() {
  var n = 1;

  function inner() {
    n++; // 訪問 outer 函式作用域中的變數 n，形成閉包
    console.log(n);
  }

  return inner;
}

outer()();

閉包形式三：在外部函式內定義一個立即執行函式

function outer() {
  var n = 1;

  (function() {
    n++; // 訪問 outer 函式作用域中的變數 n，形成閉包
    console.log(n);
  })();

}

outer();

閉包的作用

作用一：可以直接訪問函式作用域中的變數
作用二：可以將函式作用域中的變數如全域性變數一樣始終儲存在記憶體中（其實能否一直儲存區域性變數，跟閉包的執行形式有關）

說明：作用二的解析為個人理解

以下示例為證明觀點：閉包能否一直儲存區域性變數，跟閉包的執行形式有關

閉包執行方式一：在返回的閉包後面緊跟一個 () ，立即執行

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log(n);
  }

  return inner;
}

outer()();  // 2
outer()();  // 2

閉包執行方式二：將返回的閉包賦值給一個全域性變數，全域性變數執行 () 操作，執行閉包

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log(n);
  }

  return inner;
}

var inner = outer();
inner();    // 2
inner();    // 3  （是在 2 的基礎上加 1）

以上兩種執行方式單獨使用，只能說明第二種執行方式，能使閉包一直儲存區域性變數，但還不能證明閉包的第一種執行方式不能一直儲存區域性變數，因為每次執行 outer()函式時，變數 n 都被重新初始化了。

請繼續看以下程式碼，同時使用了閉包的兩種執行方式：

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log(n);
  }

  return inner;
}

var inner = outer();

outer()();  // 2
outer()();  // 2  (Flag1)

inner();    // 2  (Flag2)
inner();    // 3

可以看到，Flag1 跟 Flag2 的值都是 2，假設 outer()() 這樣的閉包執行方式會一直儲存區域性變數在記憶體的話，那 Flag2 處的值應該是 3。

顯然假設不成立。

從而說明：閉包並非就一定可以一直儲存區域性變數在記憶體，還跟執行方式有關。

主動釋放記憶體

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log('n = ', n);
  }

  return inner;
}

var inner = outer();
inner();    // 2  
inner();    // 3

inner = null;  // 解除對閉包的引用，以便釋放記憶體