摘要：嵌套函數(shù)在一個(gè)函數(shù)中創(chuàng)建另一個(gè)函數(shù)，稱為嵌套。這在很容易實(shí)現(xiàn)嵌套函數(shù)可以訪問外部變量，幫助我們很方便地返回組合后的全名。更有趣的是，嵌套函數(shù)可以作為一個(gè)新對(duì)象的屬性或者自己本身被。

來源于 現(xiàn)代JavaScript教程
閉包章節(jié)
中文翻譯計(jì)劃
本文很清晰地解釋了閉包是什么，以及閉包如何產(chǎn)生，相信你看完也會(huì)有所收獲

關(guān)鍵字
Closure 閉包
Lexical Environment 詞法環(huán)境
Environment Record 環(huán)境記錄
outer Lexical Environment 外部詞法環(huán)境
global Lexical Environment 全局語法環(huán)境

JavaScript 是一個(gè) function-oriented（直譯：面向函數(shù)）的語言，這個(gè)特性為我們帶來了很大的操作自由。函數(shù)只需創(chuàng)建一次，賦值到一個(gè)變量，或者作為參數(shù)傳入另一個(gè)函數(shù)然后在一個(gè)全新的環(huán)境調(diào)用。

函數(shù)可以訪問它外部的變量，是一個(gè)常用 feature。

但是當(dāng)外部變量改變時(shí)會(huì)發(fā)生什么？函數(shù)會(huì)獲取最新的值，還是函數(shù)創(chuàng)建當(dāng)時(shí)的值？

還有一個(gè)問題，當(dāng)函數(shù)被傳入其他地方再調(diào)用……他能訪問那個(gè)地方的外部變量嗎？

不同語言的表現(xiàn)有所不同，下面我們研究一下 JavaScript 中的表現(xiàn)。

我們先思考下面兩種情況，看完這篇文章你就可以回答這兩個(gè)問題，更復(fù)雜的問題也不在話下。

sayHi 函數(shù)使用了外部變量 name。函數(shù)運(yùn)行時(shí)，會(huì)使用兩個(gè)值中的哪個(gè)？

let name = "John";

function sayHi() {
  alert("Hi, " + name);
}

name = "Pete";

sayHi(); // "John" 還是 "Pete"？

這個(gè)情況不論是瀏覽器端還是服務(wù)器端都很常見。函數(shù)很可能在它創(chuàng)建一段時(shí)間后才執(zhí)行，例如等待用戶操作或者網(wǎng)絡(luò)請求。

問題是：函數(shù)是否會(huì)選擇變量最新的值呢？

makeWorker 函數(shù)創(chuàng)建并返回了另一個(gè)函數(shù)。這個(gè)新函數(shù)可以在任何地方調(diào)用。他會(huì)訪問創(chuàng)建時(shí)的變量還是調(diào)用時(shí)的變量呢？

function makeWorker() {
  let name = "Pete";

  return function() {
    alert(name);
  };
}

let name = "John";

// 創(chuàng)建函數(shù)
let work = makeWorker();

// 調(diào)用函數(shù)
work(); // "Pete"（創(chuàng)建時(shí)）還是 "John"（調(diào)用時(shí)）？

要理解里面發(fā)生了什么，必須先明白“變量”到底是什么。

在 JavaScript 里，任何運(yùn)行的函數(shù)、代碼塊、整個(gè) script 都會(huì)關(guān)聯(lián)一個(gè)被稱為 Lexical Environment （詞法環(huán)境） 的對(duì)象。

Lexical Environment 對(duì)象包含兩個(gè)部分：（譯者：這里是重點(diǎn)）

Environment Record（環(huán)境記錄）是一個(gè)以全部局部變量為屬性的對(duì)象（以及其他如 this 值的信息）。

對(duì) outer lexical environment（外部詞法環(huán)境）的引用，通常關(guān)聯(lián)詞法上的外面一層代碼（花括號(hào)外一層）。

所以，“變量”就是內(nèi)部對(duì)象 Environment Record 的一個(gè)屬性。要獲取或改變一個(gè)對(duì)象，意味著獲取改變 Lexical Environment 的屬性。

例如在這段簡單的代碼中，只有一個(gè) Lexical Environment：

這就是所謂 global Lexical Environment（全局語法環(huán)境），對(duì)應(yīng)整個(gè) script。對(duì)于瀏覽端，整個(gè)

let name = "John";

function sayHi() {
 alert("Hi, " + name);
}

name = "Pete"; // (*)

sayHi(); // Pete

一次調(diào)用，一個(gè) Lexical Environment
請注意，每當(dāng)一個(gè)函數(shù)運(yùn)行，就會(huì)創(chuàng)建一個(gè)新的 function Lexical Environment。
如果一個(gè)函數(shù)被多次調(diào)用，那么每次調(diào)用都會(huì)生成一個(gè)屬于當(dāng)前調(diào)用的全新 Lexical Environment，里面裝載著當(dāng)前調(diào)用的變量和實(shí)參。

Lexical Environment 是一個(gè)標(biāo)準(zhǔn)對(duì)象（specification object）
"Lexical Environment" 是一個(gè)標(biāo)準(zhǔn)對(duì)象（specification object），不能直接獲取或設(shè)置它，JavaScript 引擎也可能優(yōu)化它，拋棄未使用的變量來節(jié)省內(nèi)存或者作其他優(yōu)化，但是可見行為應(yīng)該如上面所述。

function sayHiBye(firstName, lastName) {

 // helper nested function to use below
 function getFullName() {
   return firstName + " " + lastName;
 }

 alert( "Hello, " + getFullName() );
 alert( "Bye, " + getFullName() );

}

// 構(gòu)造函數(shù)返回一個(gè)新對(duì)象
function User(name) {

 // 嵌套函數(shù)創(chuàng)造對(duì)象方法
 this.sayHi = function() {
   alert(name);
 };
}

let user = new User("John");
user.sayHi(); // 方法返回外部 "name"

function makeCounter() {
 let count = 0;

 return function() {
   return count++; // has access to the outer counter
 };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2

function makeCounter() {
 let count = 0;
 return function() {
   return count++;
 };
}

let counter1 = makeCounter();
let counter2 = makeCounter();

alert( counter1() ); // 0
alert( counter1() ); // 1

alert( counter2() ); // 0 （獨(dú)立）

counter() 函數(shù)不只是返回 count，還會(huì)對(duì)其 +1 操作。這個(gè)修改已經(jīng)在“適當(dāng)?shù)奈恢谩蓖瓿闪恕?b>count 的值在它的當(dāng)前環(huán)境中被修改。

這一步再次調(diào)用 count，原理完全相同。

（譯者：總結(jié)一下，聲明時(shí)記錄環(huán)境 [[Environment]]（函數(shù)所在環(huán)境），執(zhí)行時(shí)創(chuàng)建詞法環(huán)境（局部+ outer 就是引用 [[Environment]]），而閉包就是函數(shù) + 它的詞法環(huán)境，所以定義上來說所有函數(shù)都是閉包，但是之后被返回出來可以使用的閉包才是“實(shí)用意義”上的閉包）

下一個(gè) counter() 調(diào)用操作同上。

本章開頭第二個(gè)問題的答案現(xiàn)在顯而易見了。

以下代碼的 work() 函數(shù)通過外層 lexical environment 引用了它原地點(diǎn)的 name ：

所以這里的答案是 "Pete"。

但是如果 makeWorker() 沒了 let name ，如我們所見，作用域搜索會(huì)到達(dá)外層，獲取全局變量。這個(gè)情況下答案會(huì)是 "John" 。

閉包（Closure）
開發(fā)者們都應(yīng)該知道編程領(lǐng)域的通用名詞閉包（closure）。
閉包是一個(gè)記錄并可訪問外層變量的函數(shù)。在一些編程語言中是不存在的，或者要以一種特殊的方式書寫以實(shí)現(xiàn)這個(gè)功能。但是如上面解釋的，JavaScript 的所有函數(shù)都個(gè)閉包。
這就是閉包：它們使用 [[Environment]] 屬性自動(dòng)記錄各自的創(chuàng)建地點(diǎn)，然后由此訪問外部變量。
在前端面試中，如果面試官問你什么是閉包，正確答案應(yīng)該包括閉包的定義，以及解釋為何 JavaScript 的所有函數(shù)都是閉包，最好可以再簡單說說里面的技術(shù)細(xì)節(jié)：[[Environment]] 屬性和 Lexical Environments 的原理。

上面的例子都著重于函數(shù)，但是 Lexical Environment 也存在于代碼塊 {...} 。

它們在代碼塊運(yùn)行時(shí)創(chuàng)建，包含塊局部變量。這里有一些例子。

下例中，當(dāng)執(zhí)行到 if 塊，會(huì)為這個(gè)塊創(chuàng)建新的 "if-only" Lexical Environment ：

與函數(shù)同樣原理，塊內(nèi)可以找到 phrase，但是塊外不能使用塊內(nèi)的變量和函數(shù)。如果執(zhí)意在 if 外面用 user，那只能得到一個(gè)報(bào)錯(cuò)了。

對(duì)于循環(huán)，每一次迭代都會(huì)有自己的 Lexical Environment，在 for 里定義的變量，也是塊的局部變量，也屬于塊的 Lexical Environment ：

for (let i = 0; i < 10; i++) {
 // Each loop has its own Lexical Environment
 // {i: value}
}

alert(i); // Error, no such variable

let i 只在塊內(nèi)可用，每次循環(huán)都有它自己的 Lexical Environment，每次循環(huán)都會(huì)帶著當(dāng)前的 i，最后循環(huán)結(jié)束，i 不可用。

我們也可以直接用 {…} 把變量隔離到一個(gè)“局部作用域”（local scope）。

在瀏覽器中所有 script 共享全局變量，這就很容易造成變量的重名、覆蓋。

為了避免這種情況我們可以使用代碼塊隔離自己的代碼：

{
 // do some job with local variables that should not be seen outside

 let message = "Hello";

 alert(message); // Hello
}

alert(message); // Error: message is not defined

代碼塊有自己的 Lexical Environment ，塊外無法訪問塊內(nèi)變量。

以前沒有代碼塊，要實(shí)現(xiàn)上述效果要依靠所謂的“立即執(zhí)行函數(shù)表達(dá)式”（immediately-invoked function expressions ，縮寫 IIFE）：

(function() {

 let message = "Hello";

 alert(message); // Hello

})();

這個(gè)函數(shù)表達(dá)式創(chuàng)建后立即執(zhí)行，代碼立即執(zhí)行并有自己的私有變量。

函數(shù)表達(dá)式需要被括號(hào)包裹。JavaScript 執(zhí)行時(shí)遇到 "function" 會(huì)理解為一個(gè)函數(shù)聲明，函數(shù)聲明必須有名稱，沒有就會(huì)報(bào)錯(cuò)：

// Error: Unexpected token (
function() { // <-- JavaScript cannot find function name, meets ( and gives error

 let message = "Hello";

 alert(message); // Hello

}();

你可能會(huì)說：“那我給他加個(gè)名字咯”，但這依然行不通，JavaScript 不允許函數(shù)聲明立刻被執(zhí)行：

// syntax error because of brackets below
function go() {

}(); // <-- can"t call Function Declaration immediately

圓括號(hào)告訴 JavaScript 這個(gè)函數(shù)創(chuàng)建于其他表達(dá)式的上下文，因此這是個(gè)函數(shù)表達(dá)式。不需要名稱，也可以立即執(zhí)行。

也有其他方法告訴 JavaScript 我們需要的是函數(shù)表達(dá)式：

// 創(chuàng)建 IIFE 的方法

(function() {
 alert("Brackets around the function");
})();

(function() {
 alert("Brackets around the whole thing");
}());

!function() {
 alert("Bitwise NOT operator starts the expression");
}();

+function() {
 alert("Unary plus starts the expression");
}();

Lexical Environment 對(duì)象與普通的值的內(nèi)存管理規(guī)則是一樣的。

通常 Lexical Environment 在函數(shù)運(yùn)行完畢就會(huì)被清理：

function f() {
  let value1 = 123;
  let value2 = 456;
}

f();

這兩個(gè)值是 Lexical Environment 的屬性，但是 f() 執(zhí)行完后，這個(gè) Lexical Environment 無任何變量引用（unreachable），所以它會(huì)從內(nèi)存刪除。

...但是如果有內(nèi)嵌函數(shù)，它的 [[Environment]] 會(huì)引用 f 的 Lexical Environment（reachable）：

function f() {
  let value = 123;

  function g() { alert(value); }

  return g;
}

let g = f(); // g is reachable, and keeps the outer lexical environment in memory

注意，f() 如果被多次調(diào)用，返回的函數(shù)都被保存，相應(yīng)的 Lexical Environment 會(huì)分別保存在內(nèi)存：

function f() {
  let value = Math.random();

  return function() { alert(value); };
}

// 3 functions in array, every one of them links to Lexical Environment
// from the corresponding f() run
//         LE   LE   LE
let arr = [f(), f(), f()];

Lexical Environment 對(duì)象在不可觸及（unreachable）后被清除：無嵌套函數(shù)引用它。下例中， g 自身不被引用后， value 也會(huì)被清除：

function f() {
 let value = 123;

 function g() { alert(value); }

 return g;
}

let g = f(); // while g is alive
// there corresponding Lexical Environment lives

g = null; // ...and now the memory is cleaned up

理論上，函數(shù)還在，它的所有外部變量都會(huì)被保留。

但在實(shí)踐中，JavaScript 引擎可能會(huì)對(duì)此作出優(yōu)化，引擎在分析變量的使用情況后，把沒有使用的外部變量刪除。

在 V8 (Chrome, Opera)有個(gè)問題，這些被刪除的變量不能在 debugger 觀察了。

嘗試在 Chrome Developer Tools 運(yùn)行以下代碼：

function f() {
 let value = Math.random();

 function g() {
   debugger; // 在 console 輸入 alert( value ); 發(fā)現(xiàn)無此變量！
 }

 return g;
}

let g = f();
g();

你可以看到，這里沒有保存 value 變量！理論上它應(yīng)該是可訪問的，但是引擎優(yōu)化移除了這個(gè)變量。

還有一個(gè)有趣的 debug 問題。下面的代碼 alert 出外面的同名變量而不是里面的：

let value = "Surprise!";

function f() {
 let value = "the closest value";

 function g() {
   debugger; // in console: type alert( value ); Surprise!
 }

 return g;
}

let g = f();
g();

再會(huì)！
如果你用 Chrome/Opera 來debug ，很快就能發(fā)現(xiàn)這個(gè) V8 feature。
這不是 bug 而是 V8 feature，或許將來會(huì)被修改。至于改沒改，運(yùn)行一下上面的例子就能判斷啦。