目錄
- 概述
- 作用域
- 編譯過程
- 詞法作用域
- 全局作用域
- 函數(shù)作用域
- 閉包
- 循環(huán)和閉包
- 閉包的用途
- 性能
- 總結(jié)
概述
作用域和閉包一直是各大小廠面試的重點(diǎn)歉提，學(xué)習(xí)了一段時(shí)間 JS 了，是時(shí)候?qū)@部分知識(shí)有個(gè)交代了。
本文暫不涉及ES6的塊級(jí)作用域苔巨。
本文是對(duì)《你不知道的JavaScript》的大量梳理版扩。
作用域
作用域是一套用來存儲(chǔ)變量的規(guī)則，用于確定在何處以及如何查找變量（標(biāo)志符）侄泽。
作用域也通常被理解為變量存在的范圍礁芦、當(dāng)前的執(zhí)行上下文等。在 ES5 的規(guī)范中悼尾，JavaScript 只有兩種作用域：
- 全局作用域：變量在整個(gè)程序中一直存在柿扣，所有地方都可以讀取
- 函數(shù)作用域：變量只在函數(shù)內(nèi)部存在
當(dāng)一個(gè)函數(shù)中嵌套另一個(gè)函數(shù)，它的作用域也會(huì)嵌套闺魏，一層層的作用域嵌套未状，就形成了作用域鏈。
如果一個(gè)變量或者其他表達(dá)式不在當(dāng)前的作用域析桥，那么 JS 機(jī)制會(huì)繼續(xù)沿著一層一層作用域鏈往上查找司草，直到全局作用域（global 或?yàn)g覽器中的 window）。如果找不到將不可被使用泡仗。
而在源代碼執(zhí)行前翻伺，會(huì)先經(jīng)歷編譯過程。
編譯過程
與傳統(tǒng)的編譯語言不同沮焕，JavaScript 不是提前編譯的吨岭，大部分情況下編譯發(fā)生在代碼執(zhí)行前的幾微秒甚至更短的時(shí)間內(nèi)。因此 JavaScript 引擎用了各種辦法（比如 JIT峦树，可以延遲甚至重編譯）來保證性能最佳辣辫。
整個(gè)編譯過程分為以下幾步：
（1）詞法分析
這個(gè)過程會(huì)將由字符組成的字符串分解成有意義的代碼塊，這些代碼塊被稱為詞法單元（token）魁巩。
比如 var a = 2急灭，這段程序會(huì)分解成這些詞法單元：var、a谷遂、=葬馋、2。之間的空格是否當(dāng)做詞法單元取決于是否有意義肾扰。
（2）語法分析
這個(gè)過程是將詞法單元流（數(shù)組）轉(zhuǎn)換成一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語法結(jié)構(gòu)的樹畴嘶。這個(gè)樹被稱為“抽象語法樹”（Abstract Syntax Tree，AST）集晚。
這棵樹定義了代碼的結(jié)構(gòu)窗悯，通過操縱這棵樹，我們可以精準(zhǔn)的定位到聲明語句偷拔、賦值語句蒋院、運(yùn)算語句等等亏钩，實(shí)現(xiàn)對(duì)代碼的分析、優(yōu)化欺旧、變更等操作姑丑。
舉個(gè)例子：
var global1 = 1
上面這段代碼的 AST 如下（Parser: acorn-6.1.1）：
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"id": {
"type": "Identifier",
"name": "global1"
},
"init": {
"type": "Literal",
"value": 1,
"raw": "1"
}
}
],
"kind": "var"
}
舉個(gè)更復(fù)雜的例子（詳見——完整語法樹）：
var global1 = 1
function fn1(param1){
var local1 = 'local1'
var local2 = 'local2'
function fn2(param2){
var local2 = 'inner local2'
console.log(local1)
console.log(local2)
}
function fn3(){
var local2 = 'fn3 local2'
fn2(local2)
}
fn3() // 'local1'
// 'inner local2'
}
fn1()
如果只分析變量聲明，AST 可以簡(jiǎn)化為如下的圖：
整個(gè)分析過程是在靜態(tài)階段完成的辞友，因此 fn3 中的 fn2 在語法分析階段就已經(jīng)確定了它的聲明位置栅哀，并且在 fn1 調(diào)用的時(shí)候，明確了 fn2 的作用域是 fn1 的函數(shù)結(jié)構(gòu)體內(nèi)踏枣，fn3 的函數(shù)作用域并不會(huì)對(duì)其造成影響昌屉，因此打印的 local2 的值是 'inner local2' 而不是 'fn3 local2'。
AST 常見的幾種用途：
- 代碼語法的檢查茵瀑、代碼風(fēng)格的檢查间驮、代碼的格式化、代碼的高亮马昨、代碼錯(cuò)誤提示竞帽、代碼自動(dòng)補(bǔ)全等等
- 如JSLint、JSHint對(duì)代碼錯(cuò)誤或風(fēng)格的檢查鸿捧，發(fā)現(xiàn)一些潛在的錯(cuò)誤
IDE的錯(cuò)誤提示屹篓、格式化、高亮匙奴、自動(dòng)補(bǔ)全等等
- 如JSLint、JSHint對(duì)代碼錯(cuò)誤或風(fēng)格的檢查鸿捧，發(fā)現(xiàn)一些潛在的錯(cuò)誤
- 代碼混淆壓縮
- UglifyJS2等
- 優(yōu)化變更代碼堆巧，改變代碼結(jié)構(gòu)使達(dá)到想要的結(jié)構(gòu)
- 代碼打包工具webpack、rollup等等
CommonJS泼菌、AMD谍肤、CMD、UMD等代碼規(guī)范之間的轉(zhuǎn)化
CoffeeScript哗伯、TypeScript荒揣、JSX等轉(zhuǎn)化為原生Javascript
- 代碼打包工具webpack、rollup等等
（3）代碼生成
將 AST 轉(zhuǎn)換為可執(zhí)行代碼的過程。
代碼生成就是上一個(gè)步驟得到的 AST 轉(zhuǎn)化為機(jī)器指令焊刹，然后在內(nèi)存中存儲(chǔ)它們系任。
詞法作用域
就是定義在詞法階段的作用域。變量的作用域是在定義時(shí)而非執(zhí)行時(shí)決定虐块，也就是說詞法作用域取決于源碼俩滥，通過靜態(tài)分析就能確定，因此詞法作用域也叫做靜態(tài)作用域（
with和eval可以欺騙詞法作用域）非凌。
以 var a = 2 為例：
- 編譯器遇到
var a會(huì)詢問作用域中是否有該名稱的變量举农。如果是，忽略并繼續(xù)編譯敞嗡；如果不是颁糟，在當(dāng)前作用域聲明變量，命名為a喉悴。 - 引擎執(zhí)行代碼
a = 2棱貌，會(huì)查詢a（LHS查詢）并對(duì)其進(jìn)行賦值。
查詢分兩種：
- LHS（Left Hand Side）：查找目的是為變量賦值
- RHS（Right Hand Side）：查找目的是獲取變量的值
LHS 和 RHS 查詢都會(huì)在當(dāng)前執(zhí)行作用域開始箕肃，如果沒有找到所需標(biāo)志符婚脱，就會(huì)向上級(jí)作用域繼續(xù)查詢，一級(jí)一級(jí)直到全局作用域勺像。到了全局作用域障贸，如果 RHS 查詢失敗拋出 ReferenceError，如果 LHS 查詢失敗會(huì)隱式創(chuàng)建一個(gè)全局變量（非嚴(yán)格模式）吟宦。
看個(gè)例子：
function foo(a) {
var b = a
return a + b
}
var c = foo(2)
- 引擎執(zhí)行
var c = foo(2)篮洁，會(huì)在作用域里查找（RHS）是否有foo函數(shù) - 找到后，將實(shí)參
2賦值給形參a（LHS殃姓，隱式變量分配） -
var b = a袁波，首先要先找到變量a（RHS） - 將
a的值賦值給b（LHS） -
return a + b，分別查找a和b的值（兩次 RHS）蜗侈，然后返回 - 將
foo(2)的結(jié)果賦值給c（LHS）
全局作用域
以瀏覽器環(huán)境為例：
- 最外層函數(shù)和在最外層函數(shù)外面定義的變量擁有全局作用域
- 所有未定義直接賦值的變量自動(dòng)聲明為擁有全局作用域
- 所有 window 對(duì)象的屬性擁有全局作用域
缺點(diǎn)：會(huì)污染全局命名空間篷牌。
解決方案：
- 立即執(zhí)行函數(shù)（Immediately Invoked Function Expression， IIFE）踏幻，因此很多庫(kù)的源碼都在使用
- 模塊化 (ES6枷颊、commonjs 等等)
函數(shù)作用域
函數(shù)作用域指屬于這個(gè)函數(shù)的全部變量都可以在整個(gè)函數(shù)范圍內(nèi)使用及復(fù)用。
function foo() {
let name = 'Shawn'
function sayName() {
console.log(`Hello, ${name}`)
}
sayName()
}
foo() // 'Hello, Shawn'
console.log(name) // 外部無法訪問到內(nèi)部變量
sayName() // 外部無法訪問到內(nèi)部函數(shù)
閉包
當(dāng)函數(shù)可以記住并訪問所在的詞法作用域该面，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行夭苗，這時(shí)就產(chǎn)生了閉包。
舉個(gè)最簡(jiǎn)單的閉包（函數(shù) + 函數(shù)內(nèi)部能訪問的變量）：
var local = "變量"
function foo () {
console.log(local)
}
但這樣 local 就暴露在了全局作用域中吆倦，其他函數(shù)也能訪問听诸。并且，這里只體現(xiàn)了可以訪問蚕泽，并沒有“記住”晌梨。所以在閉包的基礎(chǔ)上還需添加一些代碼，使得變量 local 成為 foo 的局部變量须妻，且 foo 能被外部訪問到仔蝌。一些實(shí)現(xiàn)方式：
（1）用立即執(zhí)行函數(shù)封裝，并將所需函數(shù)添加為 window 的全局變量
!function(){
var local = "變量"
window.foo = function (){
console.log(local)
}
}()
foo()
（2）匿名函數(shù)表達(dá)式荒吏，將所需函數(shù)當(dāng)做參數(shù)返回
var a = function(){
var local = "變量"
function foo(){
console.log(local)
}
return foo
}
var myFoo = a()
myFoo() // 這就是閉包的效果
上面（2）中的例子里敛惊，因?yàn)樾枰L問局部變量 local，設(shè)計(jì)了函數(shù) foo绰更，根據(jù)嵌套函數(shù)“內(nèi)部函數(shù)可以訪問外部函數(shù)的參數(shù)和變量”的特點(diǎn)瞧挤，foo 可以訪問到局部變量 local锡宋，然后在外部函數(shù)中，將 foo 作為參數(shù)返回特恬。這樣执俩，當(dāng)匿名函數(shù)被賦值給 a，然后將 a 的執(zhí)行結(jié)果賦值給 myFoo癌刽，就等價(jià)于 myFoo = foo役首，執(zhí)行 myFoo，就達(dá)到了記住并訪問 foo 所在詞法作用域的目的显拜。
并且衡奥，在 a() 執(zhí)行之后，由于閉包的存在远荠，其內(nèi)部作用域并不會(huì)被GC銷毀矮固，因?yàn)?foo() 在持續(xù)使用該內(nèi)部作用域。
無論以何種方式將內(nèi)部函數(shù)傳遞到所在詞法作用域之外矮台，它都會(huì)保持對(duì)原始定義作用域的引用乏屯，無論在何處執(zhí)行這個(gè)函數(shù)都會(huì)使用閉包。
循環(huán)和閉包
來看個(gè)經(jīng)典的例子：
for (var i = 1; i <=5; i++) {
setTimeout(function timer(){
console.log(i)
}, i * 1000)
}
初看這段代碼時(shí)瘦赫，我對(duì)這段代碼的預(yù)期是：分別輸出數(shù)字 1~5辰晕，每秒一次，一次一個(gè)确虱。
然而實(shí)際運(yùn)行結(jié)果是：輸出五次 6含友，每秒一次。
Why校辩？
首先窘问，循環(huán)結(jié)束時(shí) i 的值是 6，然后宜咒，延遲函數(shù)的回調(diào)會(huì)在循環(huán)結(jié)束時(shí)才執(zhí)行惠赫。即使設(shè)置 setTimeout(..., 0)，結(jié)果依然不變故黑。
Why?
因?yàn)?setTimeout 是異步執(zhí)行的儿咱，1000 毫秒后向任務(wù)隊(duì)列里添加一個(gè)任務(wù)，只有主線程上的任務(wù)全部執(zhí)行完畢才會(huì)執(zhí)行任務(wù)隊(duì)列里的任務(wù)场晶，所以當(dāng)主線程 for 循環(huán)執(zhí)行完之后 i 的值為 6混埠，而用這個(gè)時(shí)候再去任務(wù)隊(duì)列中執(zhí)行任務(wù)，因此 i 全部為 6诗轻。
又因?yàn)樵?for 循環(huán)中使用 var 聲明的 i 是在全局作用域中钳宪，那么全程都只有一個(gè) i，盡管循環(huán)中的 5 個(gè)函數(shù)都在各自的迭代中分別定義，然而它們共享這一個(gè) i 的引用吏颖，因此 timer 函數(shù)中打印出來的 i 自然是都是 6搔体。
那么，我們需要給循環(huán)中的每個(gè)迭代過程都設(shè)定一個(gè)閉包作用域侦高。
試一下立即執(zhí)行函數(shù)（IIFE）來解決嫉柴。
第一次嘗試：
for (var i = 1; i <=5; i++) {
!function () {
setTimeout(function timer(){
console.log(i)
}, i * 1000)
}()
}
然而這樣并不能成功厌杜，因?yàn)槟涿瘮?shù)的作用域是空的奉呛，它并沒有什么實(shí)質(zhì)內(nèi)容為我們所用。全程依然只有一個(gè) i夯尽。
第二次嘗試：
for (var i = 1; i <=5; i++) {
!function () {
var j = i
setTimeout(function timer(){
console.log(j)
}, j * 1000)
}()
}
It worked! 但是代碼看起來不太優(yōu)雅瞧壮。
第三次嘗試：
for (var i = 1; i <=5; i++) {
!function (j) {
setTimeout(function timer(){
console.log(j)
}, j * 1000)
}(i)
}
這樣，在迭代內(nèi)使用 IIFE 會(huì)為每個(gè)迭代都生成一個(gè)新的作用域匙握，使得延遲函數(shù)的回調(diào)可以將新的作用域封閉在每個(gè)迭代內(nèi)部咆槽，每個(gè)迭代中都會(huì)含有一個(gè)具有正確值的變量供我們?cè)L問。
那么圈纺，ES6 之后這個(gè)問題是怎么解決的呢秦忿？首先想到let，可以用來劫持塊作用域蛾娶，并且在塊作用域內(nèi)聲明一個(gè)變量灯谣。
第四次嘗試：
for (var i = 1; i <=5; i++) {
let j = i // 閉包的塊作用域
setTimeout(function timer(){
console.log(j)
}, j * 1000)
}
那么，這是不是究極答案呢蛔琅？先看代碼：
第五次嘗試：
for (let i = 1; i <=5; i++) {
setTimeout(function timer(){
console.log(i)
}, i * 1000)
}
最后這種寫法胎许，是現(xiàn)在的通用寫法。
它是一個(gè)語法糖罗售，并且其內(nèi)部原理就是第四次嘗試的寫法代碼辜窑。這里 i 的作用域只在 for(...) 的圓括號(hào)內(nèi)，只不過每次迭代寨躁，JS 會(huì)自動(dòng)重新聲明一個(gè) i 在 {...} 內(nèi)穆碎，隨后的每個(gè)迭代的 i 都會(huì)使用上一個(gè)迭代結(jié)束時(shí)的值來初始化。
閉包的用途
（1）存儲(chǔ)职恳、隱藏變量
閉包一大用途是讀取函數(shù)內(nèi)部的變量所禀，并讓這些變量始終保持在內(nèi)存中，即閉包可以使得它誕生環(huán)境一直存在话肖。并且由于是函數(shù)內(nèi)部的變量北秽，局部變量外部無法訪問，也達(dá)到了隱藏的目的最筒。
function createCounter(initial) {
var x = initial || 0
return {
inc: function () {
x += 1
return x
}
}
}
var c1 = createCounter()
c1.inc() // 1
c1.inc() // 2
c1.inc() // 3
var c2 = createCounter(1024)
c2.inc() // 1025
c2.inc() // 1026
c2.inc() // 1027
上例中贺氓，x 是函數(shù) createCounter 的內(nèi)部變量。通過閉包，x 的狀態(tài)被保留了辙培，每一次調(diào)用都是在上一次調(diào)用的基礎(chǔ)上進(jìn)行計(jì)算蔑水。inc 存在依賴于 createCounter，因此也始終在內(nèi)存中扬蕊，不會(huì)在調(diào)用結(jié)束后搀别，被垃圾回收機(jī)制回收。這就使得變量 x 達(dá)到了儲(chǔ)存且隱藏的目的尾抑。
所以歇父，閉包可以看作是函數(shù)內(nèi)部作用域的一個(gè)接口。
（2）封裝私有變量
由于 JavaScript 中的屬性沒有 public再愈、private 這類的修飾符來控制訪問榜苫，并且所有屬性都需要在函數(shù)中定義，我們需要一些手段來達(dá)到變量私有化的目的翎冲。
var Foo = function () {
var _name = 'Frank'
this.getName = function () {
return _name
}
this.setName = function (str) {
_name = str
}
}
var foo1 = new Foo()
foo1.setName('Shawn')
var foo2 = new Foo()
foo2.setName('Givenchy')
foo1._name // undefined垂睬，外部無法直接訪問局部變量，相當(dāng)于“私有化”
foo1.getName() // 'Shawn'
foo2.getName() // 'Givenchy'
上例中抗悍，函數(shù) Foo 的內(nèi)部變量 _name驹饺，通過閉包 setName 和 getName，變成了返回對(duì)象 foo1 和 foo2 的私有變量缴渊，并且它們之間互不影響赏壹，互相獨(dú)立。
更普遍地疟暖，本質(zhì)上無論何時(shí)何地卡儒，如果將（訪問它們各自詞法作用域的）函數(shù)當(dāng)作第一級(jí)的值類型并到處傳遞，就能看到閉包在這些函數(shù)中的應(yīng)用俐巴。如在定時(shí)器骨望、事件監(jiān)聽器、AJAX請(qǐng)求欣舵、跨窗口通信擎鸠、Web Worders或者任何其他的異步（或同步）任務(wù)中，只要使用了回調(diào)函數(shù)缘圈，實(shí)際上就是在使用閉包劣光。
性能
如果不是某些特定任務(wù)需要使用閉包器净，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的又憨，因?yàn)殚]包在處理速度和內(nèi)存消耗方面對(duì)腳本性能具有負(fù)面影響。
例如鳖轰，在創(chuàng)建新的對(duì)象或者類時(shí)遣疯，方法通常應(yīng)該關(guān)聯(lián)于對(duì)象的原型雄可，而不是定義到對(duì)象的構(gòu)造器中。原因是這將導(dǎo)致每次構(gòu)造器被調(diào)用時(shí)，方法都會(huì)被重新賦值一次（也就是数苫，每個(gè)對(duì)象的創(chuàng)建）聪舒。
例如上例的封裝私有變量的閉包改成在原型上定義更好：
var Foo = function () {
var _name = 'Frank'
Foo.prototype.getName = function () {
return _name
}
Foo.prototype.setName = function (str) {
_name = str
}
}
繼承的原型可以為所有對(duì)象共享，不必在每一次創(chuàng)建對(duì)象時(shí)定義方法虐急。
總結(jié)
Q：什么是作用域箱残？
A：作用域是用于確定在何處以及如何查找變量的一套規(guī)則。Q：什么是作用域鏈止吁？
A：當(dāng)一個(gè)函數(shù)嵌套在另一個(gè)函數(shù)中時(shí)被辑，就發(fā)生了作用域嵌套。如果在當(dāng)前作用域下找不到某個(gè)變量赏殃，JS 引擎就會(huì)往外層嵌套的作用域繼續(xù)查找敷待，直到找到該變量或抵達(dá)全局作用域。如果在全局作用域中還沒找到就會(huì)報(bào)錯(cuò)仁热。這種逐級(jí)向上查找的模式就是作用域鏈。Q：什么是閉包勾哩？
A：當(dāng)函數(shù)可以記住并訪問所在的詞法作用域抗蠢，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行，這時(shí)就產(chǎn)生了閉包思劳。
后面等刷了一些題之后會(huì)挑出一些經(jīng)典的題目總結(jié)一下迅矛，以備面試和加深之用。
參考：
