JavaScript中的匿名函式、立即執行函式和閉包-有解無憂

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

立即執行函式是基于匿名函式實作的，也沒有函式名，會在定義后立即執行；

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

匿名函式

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

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

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="https://www.cnblogs.com/uakora/p/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);
}

閉包

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

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

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;  // 解除對閉包的參考，以便釋放記憶體

閉包的應用場景

保護函式區域變數的安全
在記憶體中維持一個變數
通過保護變數的安全實作JS私有屬性和私有方法（不能被外部訪問）

使用閉包的注意點

??由于閉包會攜帶包含它的函式的作用域，因此會比其他函式占用跟多的記憶體，過度使用閉包可能會導致記憶體占用過多

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/122039.html

標籤：JavaScript

上一篇：React Refs 簡單演示

下一篇：React添加事件