JavaScript 閉包

zhou_you 發布于2019-08-22 10:37 / 1455人閱讀

摘要：閉包的注意事項通常，函數的作用域及其所有變量都會在函數執行結束后被銷毀。但是，在創建了一個閉包以后，這個函數的作用域就會一直保存到閉包不存在為止。最后通過釋放了和對閉包的引用。從而使用閉包模塊化代碼，減少全局變量的污染。

JavaScript 閉包

原文鏈接

什么是閉包（Closure）

簡單講，閉包就是指有權訪問另一個函數作用域中的變量的函數。

MDN 上面這么說：閉包是一種特殊的對象。它由兩部分構成：函數，以及創建該函數的環境。環境由閉包創建時在作用域中的任何局部變量組成。

但是，網上找了好多資料，它們對閉包的定義也各有各樣，搞得我也不知道怎么去定義閉包了，所以干脆不去定義了，意會吧。

道可道，非常道；名可名，非常名。

產生一個閉包

創建閉包最常見方式，就是在一個函數內部創建另一個函數。下面例子中的 closure 就是一個閉包：

function func(){
  var a = 1,b = 2;
  
  function closure(){
    return a+b;
  }
  return closure;
}

閉包的作用域鏈包含著它自己的作用域，以及包含它的函數的作用域和全局作用域。

閉包的注意事項

通常，函數的作用域及其所有變量都會在函數執行結束后被銷毀。但是，在創建了一個閉包以后，這個函數的作用域就會一直保存到閉包不存在為止。

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

// 釋放對閉包的引用
add5 = null;
add10 = null;

add5 和 add10 都是閉包。它們共享相同的函數定義，但是保存了不同的環境。在 add5 的環境中，x 為 5。而在 add10 中，x 則為 10。最后通過 null 釋放了 add5 和 add10 對閉包的引用。

在javascript中，如果一個對象不再被引用，那么這個對象就會被垃圾回收機制回收；
如果兩個對象互相引用，而不再被第3者所引用，那么這兩個互相引用的對象也會被回收。

閉包只能取得包含函數中任何變量的最后一個值，這是因為閉包所保存的是整個變量對象，而不是某個特殊的變量。

function test(){
  var arr = [];
  for(var i = 0;i < 10;i++){
    arr[i] = function(){
      return i;
    };
  }
  for(var a = 0;a < 10;a++){
    console.log(arr[a]());
  }
}
test(); // 連續打印 10 個 10

對于上面的情況，如果我們改變代碼如下：

function test(){
  var arr = [];
  for(let i = 0;i < 10;i++){  // 僅在這里作出了改動
    arr[i] = function(){
      return i;
    };
  }
  for(var a = 0;a < 10;a++){
    console.log(arr[a]());
  }
}
test(); // 打印 0 到 9

對于上面兩種代碼的解釋，請看我在 segmentfault 上面的提問：鏈接

閉包中的 this 對象

var name = "The Window";

var obj = {
  name: "My Object",
  
  getName: function(){
    return function(){
      return this.name;
    };
  }
};

console.log(obj.getName()());  // The Window

obj.getName()()實際上是在全局作用域中調用了匿名函數，this指向了window。這里要理解函數名與函數功能（或者稱函數值）是分割開的，不要認為函數在哪里，其內部的this就指向哪里。匿名函數的執行環境具有全局性，因此其 this 對象通常指向 window。

var name = "The Window";

var obj = {
  name: "My Object",
  
  getName: function(){
    var that = this;
    return function(){
      return that.name;
    };
  }
};

console.log(obj.getName()());  // My Object

閉包的應用

應用閉包的主要場合是：設計私有的方法和變量。

任何在函數中定義的變量，都可以認為是私有變量，因為不能在函數外部訪問這些變量。私有變量包括函數的參數、局部變量和函數內定義的其他函數。

把有權訪問私有變量的公有方法稱為特權方法（privileged method）。

function Animal(){
  
  // 私有變量
  var series = "哺乳動物";
  function run(){
    console.log("Run!!!");
  }
  
  // 特權方法
  this.getSeries = function(){
    return series;
  };
}

模塊模式（The Module Pattern）：為單例創建私有變量和方法。

單例（singleton）：指的是只有一個實例的對象。JavaScript 一般以對象字面量的方式來創建一個單例對象。

var singleton = {
  name: "percy",
  speak:function(){
    console.log("speaking!!!");
  },
  getName: function(){
    return this.name;
  }
};

上面是普通模式創建的單例，下面使用模塊模式創建單例：

var singleton = (function(){
  
  // 私有變量
  var age = 22;
  var speak = function(){
    console.log("speaking!!!");
  };
  
  // 特權（或公有）屬性和方法
  return {
    name: "percy",
    getAge: function(){
      return age;
    }
  };
})();

匿名函數最大的用途是創建閉包，并且還可以構建命名空間，以減少全局變量的使用。從而使用閉包模塊化代碼，減少全局變量的污染。

var objEvent = objEvent || {};
(function(){ 
    var addEvent = function(){ 
      // some code
    };
    function removeEvent(){
      // some code
    }

    objEvent.addEvent = addEvent;
    objEvent.removeEvent = removeEvent;
})();

在這段代碼中函數 addEvent 和 removeEvent 都是局部變量，但我們可以通過全局變量 objEvent 使用它，這就大大減少了全局變量的使用，增強了網頁的安全性。

一個閉包計數器

var countNumber = (function(){
  var num = 0;
  return function(){
    return ++num;
  };
})();

閉包的缺陷

閉包的缺點就是常駐內存會增大內存使用量，并且使用不當很容易造成內存泄露。

如果不是因為某些特殊任務而需要閉包，在沒有必要的情況下，在其它函數中創建函數是不明智的，因為閉包對腳本性能具有負面影響，包括處理速度和內存消耗。

最后再來一些有關閉包的面試題

下面代碼中，標記？的地方輸出分別是什么？

function fun(n,o){
  console.log(o);
  return {
    fun: function(m){
      return fun(m,n);
    }
  };
}

var a = fun(0);  // ?
a.fun(1);        // ?        
a.fun(2);        // ?
a.fun(3);        // ?

var b = fun(0).fun(1).fun(2).fun(3);  // ?

var c = fun(0).fun(1);  // ?
c.fun(2);        // ?
c.fun(3);        // ?

undefined
0
0
0
undefined, 0, 1, 2
undefined, 0
1
1

參考資料

【書】《JavaScript 高級程序設計（第三版）》

【文章】學習Javascript閉包（Closure）

【文章】【JavaScript】【函數】閉包閉包！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90947.html

Javascript閉包入門(譯文)

摘要：也許最好的理解是閉包總是在進入某個函數的時候被創建，而局部變量是被加入到這個閉包中。在函數內部的函數的內部聲明函數是可以的可以獲得不止一個層級的閉包。前言總括：這篇文章使用有效的javascript代碼向程序員們解釋了閉包，大牛和功能型程序員請自行忽略。譯者：文章寫在2006年，可直到翻譯的21小時之前作者還在完善這篇文章，在Stackoverflow的How do Java...

Fourierr 2019-08-20 13:56 評論0 收藏0
理解Javascript的閉包

摘要：但是閉包也不是什么復雜到不可理解的東西，簡而言之，閉包就是閉包就是函數的局部變量集合，只是這些局部變量在函數返回后會繼續存在?？上У氖牵]有提供相關的成員和方法來訪問閉包中的局部變量。 (收藏自技術狂) 前言：還是一篇入門文章。Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包對于那些使用傳統靜態語言C/C++的程序員來說是一個新的語言特性。本文將...

dayday_up 2019-08-21 12:37 評論0 收藏0
JavaScript閉包，只學這篇就夠了

摘要：當在中調用匿名函數時，它們用的都是同一個閉包，而且在這個閉包中使用了和的當前值的值為因為循環已經結束，的值為。最好將閉包當作是一個函數的入口創建的，而局部變量是被添加進這個閉包的。閉包不是魔法這篇文章使用一些簡單的代碼例子來解釋JavaScript閉包的概念，即使新手也可以輕松參透閉包的含義。其實只要理解了核心概念，閉包并不是那么的難于理解。但是，網上充斥了太多學術性的文章，對于...

CoderBear 2019-08-21 11:56 評論0 收藏0
JavaScript深入之閉包

摘要：深入系列第八篇，介紹理論上的閉包和實踐上的閉包，以及從作用域鏈的角度解析經典的閉包題。定義對閉包的定義為閉包是指那些能夠訪問自由變量的函數。 JavaScript深入系列第八篇，介紹理論上的閉包和實踐上的閉包，以及從作用域鏈的角度解析經典的閉包題。定義 MDN 對閉包的定義為：閉包是指那些能夠訪問自由變量的函數。那什么是自由變量呢？自由變量是指在函數中使用的，但既不是函數參數也...

caige 2019-08-20 16:07 評論0 收藏0
還擔心面試官問閉包？

摘要：一言以蔽之，閉包，你就得掌握。當函數記住并訪問所在的詞法作用域，閉包就產生了。所以閉包才會得以實現。從技術上講，這就是閉包。執行后，他的內部作用域并不會消失，函數依然保持有作用域的閉包。網上總結閉包的文章已經爛大街了，不敢說筆者這篇文章多么多么xxx，只是個人理解總結。各位看官瞅瞅就好，大神還希望多多指正。此篇文章總結與《JavaScript忍者秘籍》《你不知道的JavaScri...

tinyq 2019-08-21 17:28 評論0 收藏0
[學習筆記] JavaScript 閉包

摘要：但是，必須強調，閉包是一個運行期概念。通過原型鏈可以實現繼承，而與閉包相關的就是作用域鏈。常理來說，一個函數執行完畢，其執行環境的作用域鏈會被銷毀。所以此時，的作用域鏈雖然銷毀了，但是其活動對象仍在內存中。學習Javascript閉包（Closure）javascript的閉包JavaScript 閉包深入理解(closure)理解 Javascript 的閉包JavaScript ...

sunsmell 2019-08-21 10:33 評論0 收藏0