閉包并不復雜。學習和理解閉包的基礎知識僅僅只需要10分鐘。
什么是閉包？
閉包是JavaScript的一部分，每個工程師都應該知道和理解閉包。今天的文章只是撇開閉包的表面，但是將會給你一個很好的思想，關于什么是閉包和它在JavaScript中是如何運行的。好了，接下來我們開始吧。
我們先從書本中閉包的定義開始。
定義1
閉包是一個能訪問父作用域的函數，即使此作用域關閉了。
定義2
閉包是一個函數和該函數被聲明的詞匯環境的組合。
很好，但是這些真正的意思是什么？
首先你需要理解在JavaScript中的作用域，作用域實質上是變量在JavaScript中的生命周期。因此，當一個變量定義了一個大的作用域，這個變量會存活多久，那個方法在你的程序中會訪問到它。
讓我們看一個例子。
當你在JavaScript中創建一個函數，它可以訪問創建在這個函數里面和外面的變量。
變量創建在一個函數中也定義了這個變量。一個局部變量只能在這個被定義的函數里面訪問到。在下面這個例子中，你將會看到如果我們嘗試在這個函數外面打印words，它會輸出錯誤信息。這是因為words是一個內部作用域。
function speak () {
var words = 'hi';
console.log(words);
}
speak(); // hi
console.log(words); // undefined
和上一個例子不同，這次我們定義這個words 為全局作用域。
意思是說我們可以在任何函數中訪問這個變量。
// 將變量放到函數的外面
// words 現在是個全局變量
var words = 'hi';
function speak(){
console.log(words);
}
speak(); // 'hi'
console.log(words); // 'hi'
嵌套函數
我們將一個函數放到另一個函數里面會發生什么？我想你跟著操作下面的例子，因為這個會很有趣！
如果你使用谷歌瀏覽器，打開你的開發工具調試模式：
[Windows]：Ctrl + Shift + J
[MAC]：Cmd + Opt + J
Cool，現在拷貝下面的代碼然后粘貼到你的控制臺中。我們現在做的是創建一個名字為speak的函數。speak返回一個名稱為logIt的函數。最終logIt在控制臺中打印log值為words，在這個實例要實現在控制臺中輸出 ‘hi’
function speak() {
return function logIt() {
var words = 'hi';
console.log(words);
}
}
當你拷貝到這段代碼到你的控制臺中，我們將要創建一個變量，然后將speak函數賦值給它。
var sayHello = speak();
現在我們可以看見這個變量sayHello 調用了之后，沒有執行內部函數。
sayHello;
// function logIt() {
// var words = 'hi';
// console.log(words);
// }
如上打印的結果，sayHello 打印的是我們return的內部函數，也就是說，如果我們執行sayHello()在控制臺中，它將會喚起執行logIt()函數：
sayHello();
// 'hi'
它奏效了，但是并沒有任何特別。讓我們移除一行代碼看看什么發生了改變。請看下面的示例。我們將清楚定義的變量words移到speak()函數的里面。
function speak() {
var words = 'hi';
return function logIt() {
console.log(words);
}
}
像之前的操作，讓我們定義一個變量并將speak函數賦值給它:
var sayHello = speak();
現在我們看看我們的 sayHello變量會輸出什么：
sayHello
// function logIt() {
// console.log(words);
// }
哦，這里沒有words 變量的定義，那么發生了什么當我們執行這個函數的時候？
sayHello();
// 'hi'
它仍然起作用了！這是因為你剛剛體驗了閉包的影響。
是否有點疑惑？沒關系，回想下我們的閉包的定義：
閉包是一個能訪問父作用域的函數，即使此作用域關閉了。
在這個例子中我們的speak()函數作用域關閉了。這意味著 var words = 'hi' 應該消失了。然而，在JS中我們有一個名稱將這種現象叫做閉包：我們的內部函數保持對其創建的范圍的引用。這就允許logIt()函數仍然可以訪問words這個變量——即使speak()這個函數作用域關閉了。
function speak() {
var words = 'hi';
return function logIt() {
console.log(words);
}
}
重要提示，在JavaScript中每個函數都有一個閉包。你不需要你去解釋閉包在函數中是怎么運行的，它僅僅只是JavaScript的一部分。
實例2
讓我們查看另一個例子。這個例子有點復雜，代碼如下：
function name(n) {
return function(a) {
return `${n} likes ${a}`;
};
}
我們定義了一個名字為name 的函數可以傳遞一個參數，返回一個匿名函數，可以傳遞一個不同的參數，內部函數返回一個字符串。
我們用name函數創建兩個變量。一個我們給name函數傳遞 John，另一個傳 Cindy:
var j = name('John');
var c = name('Cindy');
讓我們看看j現在能打印什么：
j;
// function (a) {
// return `${n} likes ${a}`;
// }
所以根據之前示例我們知道這是因為閉包，這個函數應該仍然可以訪問n的變量通過父作用域。我們所能做的是把a傳遞過去，在執行函數的時候。
讓我們試試：
j('dogs'); // 'John likes dogs'
c('cats'); // 'Cindy likes cats'
成功了！因為閉包我們才能從之前關閉的作用域引用變量成功的執行我們的函數。
總結
希望你現在可以理解基本的閉包在JavaScript和它是如何運行的！這雖然只是冰山一角，但明白了基礎知識才能學習和練習更復雜的閉包。
翻譯原文鏈接：https://codeburst.io/understand-closures-in-javascript-d07852fa51e7
翻譯中有疏漏的地方，歡迎指正。
校對：蹦蹦
