寫在前面
理解作用域之前芍耘，我們需要先了解 JavaScript 的執(zhí)行機(jī)制址遇、調(diào)用棧和變量提升等知識點。如果想要深入了解概念可以谷歌查閱資料斋竞。
- JavaScript 執(zhí)行機(jī)制是先編譯再執(zhí)行倔约，JavaScript 執(zhí)行一段代碼，JavaScript 引擎先會對其進(jìn)行編譯坝初，并創(chuàng)建執(zhí)行上下文
- JavaScript 通過棧這種數(shù)據(jù)結(jié)構(gòu)來管理執(zhí)行上下文浸剩，創(chuàng)建好的執(zhí)行上下文會被壓入執(zhí)行上下文棧中，執(zhí)行上下文棧又稱為調(diào)用棧鳄袍。
- 變量提升是指在 JavaScript 代碼執(zhí)行過程中绢要，JavaScript 引擎把變量的聲明部分和函數(shù)聲明部分提升到代碼開頭的‘行為’變量被提升后會被賦予默認(rèn)值 undefined。
作用域
作用域是指程序中定義變量的區(qū)域畦木，該位置決定了變量的生命周期袖扛。通俗地理解，作用域就是變量與函數(shù)的可訪問范圍十籍，即作用域控制著變量和函數(shù)的可見性和生命周期蛆封。
ES6 之前，ES 只有全局作用域和函數(shù)作用域勾栗。
- 全局作用域中對象在代碼中的任何地方都能被訪問惨篱，其生命周期伴隨著頁面的生命周期。
- 函數(shù)作用域就是在函數(shù)內(nèi)部定義的變量或者函數(shù)围俘，并且定義的變量或者函數(shù)只能在函數(shù)內(nèi)部被訪問砸讳。函數(shù)執(zhí)行結(jié)束之后，函數(shù)內(nèi)部定義的變量會被銷毀界牡。
ES6 新增 let 和 const 關(guān)鍵字實現(xiàn)塊級作用域簿寂。
ES5 由于變量提升帶來的變量會在不被察覺的情況下被覆蓋掉、for 循環(huán)中本該被銷毀的變量沒有被銷毀等一系列問題宿亡，為解決這些問題常遂，ES6 引入 let 和 const 關(guān)鍵字，從而使 JavaScript 也能像其他語言一樣擁有了塊級作用域挽荠。
詞法作用域
詞法作用域定義：
詞法作用域指變量的作用域不是執(zhí)行時決定而是在定義時決定克胳，也就是說通過靜態(tài)分析就能確定平绩，詞法作用域取決于源碼，因此詞法作用域也叫做靜態(tài)作用域漠另。
我們可以通過下圖進(jìn)一步理解：
從圖中可以看出捏雌，詞法作用域就是根據(jù)代碼的位置來決定的，其中 main 函數(shù)包含了 bar 函數(shù)笆搓，bar 函數(shù)中包含了 foo 函數(shù)性湿，因為 JavaScript 作用域鏈?zhǔn)怯稍~法作用域決定的，所以整個詞法作用域鏈的順序是：foo函數(shù)作用域-> bar 函數(shù)作用域-> main 函數(shù)作用域-> 全局作用域满败。詞法作用域是代碼階段就決定好的窘奏，很函數(shù)是怎么點用的沒有關(guān)系。
閉包
MDN 中對閉包的定義：
函數(shù)和對其周圍狀態(tài)（詞法環(huán)境）的引用捆綁在一起構(gòu)成閉包葫录。
接下來我們結(jié)合下面代碼來理解什么是閉包：
function foo() {
var name = 'Top'
let test1 = 1
const test2 = 2
var innerBar = {
getName: function() {
console.log(test1)
return name
},
setName: function(newName) {
name = newName
}
}
return innerBar
}
var bar = foo()
bar.setName('You')
bar.getName()
console.log(bar.getName)
從上面的代碼中可以看出，innerBar 是一個對象领猾，包含了 getName 和 setName 的兩個方法（通常我們把對象內(nèi)部的函數(shù)稱為方法）米同。你可以看到，這兩個方法都是在 foo 函數(shù)內(nèi)部定義的摔竿，并且這兩個方法內(nèi)部都使用了 name 和 test 兩個變量面粮。
根據(jù)詞法作用域的規(guī)則，內(nèi)部函數(shù) getName 和 setName 總是可以訪問它們外部函數(shù) foo 中的變量继低， 所以當(dāng) innerBar 對象返回給全局變量 bar 時熬苍，雖然 foo 函數(shù)已經(jīng)執(zhí)行結(jié)束，但是 getName 和 setName 函數(shù)依然可以使用 foo 函數(shù)中的變量 name 和 test1袁翁。我們就可以把這個稱之為 foo 函數(shù)的閉包柴底。
好了，現(xiàn)在我們可以給閉包一個正式的定義了：在 JavaScript 中粱胜，根據(jù)詞法作用域的規(guī)則柄驻，內(nèi)部函數(shù)總是可以訪問其外函數(shù)中聲明的變量，當(dāng)通過調(diào)用以惡搞外部函數(shù)返回一個內(nèi)部函數(shù)后焙压，即使該外部函數(shù)已經(jīng)執(zhí)行結(jié)束了鸿脓，但是內(nèi)部函數(shù)引用外部函數(shù)的變量依然保存在內(nèi)存中，我們就把這些變量的集合稱為閉包涯曲，比如外部函數(shù) foo野哭，那么這些變量的集合就稱為 foo 函數(shù)的閉包。
寫在最后
用心寫篇文章不易幻件，如果內(nèi)容中有不妥的地方歡迎指正拨黔，當(dāng)然博客只是學(xué)習(xí)參考的依據(jù)，真正要學(xué)到掌握還是需要自己下功夫和研究的傲武。畢竟別人的理解并不一定是自己的理解蓉驹。如果對你有所幫助歡迎點贊收藏城榛，碼字不易，大家加油Ｌ恕：莩帧！
