閉包并不復(fù)雜。學(xué)習(xí)和理解閉包的基礎(chǔ)知識僅僅只需要10分鐘遣鼓。
什么是閉包？
閉包是JavaScript的一部分重贺，每個工程師都應(yīng)該知道和理解閉包骑祟。今天的文章只是撇開閉包的表面，但是將會給你一個很好的思想气笙，關(guān)于什么是閉包和它在JavaScript中是如何運行的次企。好了，接下來我們開始吧潜圃。
我們先從書本中閉包的定義開始缸棵。
定義1
閉包是一個能訪問父作用域的函數(shù)，即使此作用域關(guān)閉了谭期。
定義2
閉包是一個函數(shù)和該函數(shù)被聲明的詞匯環(huán)境的組合堵第。
很好，但是這些真正的意思是什么隧出？
首先你需要理解在JavaScript中的作用域踏志，作用域?qū)嵸|(zhì)上是變量在JavaScript中的生命周期。因此鸳劳，當(dāng)一個變量定義了一個大的作用域狰贯，這個變量會存活多久，那個方法在你的程序中會訪問到它。
讓我們看一個例子涵紊。
當(dāng)你在JavaScript中創(chuàng)建一個函數(shù)傍妒，它可以訪問創(chuàng)建在這個函數(shù)里面和外面的變量。
變量創(chuàng)建在一個函數(shù)中也定義了這個變量摸柄。一個局部變量只能在這個被定義的函數(shù)里面訪問到颤练。在下面這個例子中，你將會看到如果我們嘗試在這個函數(shù)外面打印words驱负，它會輸出錯誤信息嗦玖。這是因為words是一個內(nèi)部作用域。
function speak () {
var words = 'hi';
console.log(words);
}
speak(); // hi
console.log(words); // undefined
和上一個例子不同跃脊，這次我們定義這個words 為全局作用域宇挫。
意思是說我們可以在任何函數(shù)中訪問這個變量。
// 將變量放到函數(shù)的外面
// words 現(xiàn)在是個全局變量
var words = 'hi';
function speak(){
console.log(words);
}
speak(); // 'hi'
console.log(words); // 'hi'
嵌套函數(shù)
我們將一個函數(shù)放到另一個函數(shù)里面會發(fā)生什么酪术？我想你跟著操作下面的例子器瘪，因為這個會很有趣！
如果你使用谷歌瀏覽器绘雁，打開你的開發(fā)工具調(diào)試模式：
[Windows]：Ctrl + Shift + J
[MAC]：Cmd + Opt + J
Cool橡疼，現(xiàn)在拷貝下面的代碼然后粘貼到你的控制臺中。我們現(xiàn)在做的是創(chuàng)建一個名字為speak的函數(shù)庐舟。speak返回一個名稱為logIt的函數(shù)欣除。最終logIt在控制臺中打印log值為words，在這個實例要實現(xiàn)在控制臺中輸出 ‘hi’
function speak() {
return function logIt() {
var words = 'hi';
console.log(words);
}
}
當(dāng)你拷貝到這段代碼到你的控制臺中挪略，我們將要創(chuàng)建一個變量历帚，然后將speak函數(shù)賦值給它。
var sayHello = speak();
現(xiàn)在我們可以看見這個變量sayHello 調(diào)用了之后杠娱，沒有執(zhí)行內(nèi)部函數(shù)抹缕。
sayHello;
// function logIt() {
// var words = 'hi';
// console.log(words);
// }
如上打印的結(jié)果，sayHello 打印的是我們return的內(nèi)部函數(shù)墨辛，也就是說，如果我們執(zhí)行sayHello()在控制臺中趴俘，它將會喚起執(zhí)行logIt()函數(shù)：
sayHello();
// 'hi'
它奏效了睹簇，但是并沒有任何特別。讓我們移除一行代碼看看什么發(fā)生了改變寥闪。請看下面的示例太惠。我們將清楚定義的變量words移到speak()函數(shù)的里面。
function speak() {
var words = 'hi';
return function logIt() {
console.log(words);
}
}
像之前的操作疲憋，讓我們定義一個變量并將speak函數(shù)賦值給它:
var sayHello = speak();
現(xiàn)在我們看看我們的 sayHello變量會輸出什么：
sayHello
// function logIt() {
// console.log(words);
// }
哦凿渊，這里沒有words 變量的定義，那么發(fā)生了什么當(dāng)我們執(zhí)行這個函數(shù)的時候？
sayHello();
// 'hi'
它仍然起作用了埃脏！這是因為你剛剛體驗了閉包的影響搪锣。
是否有點疑惑？沒關(guān)系彩掐，回想下我們的閉包的定義：
閉包是一個能訪問父作用域的函數(shù)构舟，即使此作用域關(guān)閉了。
在這個例子中我們的speak()函數(shù)作用域關(guān)閉了堵幽。這意味著 var words = 'hi' 應(yīng)該消失了狗超。然而，在JS中我們有一個名稱將這種現(xiàn)象叫做閉包：我們的內(nèi)部函數(shù)保持對其創(chuàng)建的范圍的引用朴下。這就允許logIt()函數(shù)仍然可以訪問words這個變量——即使speak()這個函數(shù)作用域關(guān)閉了努咐。
function speak() {
var words = 'hi';
return function logIt() {
console.log(words);
}
}
重要提示，在JavaScript中每個函數(shù)都有一個閉包殴胧。你不需要你去解釋閉包在函數(shù)中是怎么運行的渗稍，它僅僅只是JavaScript的一部分。
實例2
讓我們查看另一個例子溃肪。這個例子有點復(fù)雜免胃，代碼如下：
function name(n) {
return function(a) {
return `${n} likes ${a}`;
};
}
我們定義了一個名字為name 的函數(shù)可以傳遞一個參數(shù)，返回一個匿名函數(shù)惫撰，可以傳遞一個不同的參數(shù)羔沙，內(nèi)部函數(shù)返回一個字符串。
我們用name函數(shù)創(chuàng)建兩個變量厨钻。一個我們給name函數(shù)傳遞 John扼雏，另一個傳 Cindy:
var j = name('John');
var c = name('Cindy');
讓我們看看j現(xiàn)在能打印什么：
j;
// function (a) {
// return `${n} likes ${a}`;
// }
所以根據(jù)之前示例我們知道這是因為閉包，這個函數(shù)應(yīng)該仍然可以訪問n的變量通過父作用域夯膀。我們所能做的是把a傳遞過去诗充，在執(zhí)行函數(shù)的時候。
讓我們試試：
j('dogs'); // 'John likes dogs'
c('cats'); // 'Cindy likes cats'
成功了诱建！因為閉包我們才能從之前關(guān)閉的作用域引用變量成功的執(zhí)行我們的函數(shù)蝴蜓。
總結(jié)
希望你現(xiàn)在可以理解基本的閉包在JavaScript和它是如何運行的！這雖然只是冰山一角俺猿，但明白了基礎(chǔ)知識才能學(xué)習(xí)和練習(xí)更復(fù)雜的閉包茎匠。
翻譯原文鏈接：https://codeburst.io/understand-closures-in-javascript-d07852fa51e7
翻譯中有疏漏的地方，歡迎指正押袍。
校對：蹦蹦
