理解JavaScript的核心知識點：做用域

時間 2019-11-06

原文原文鏈接

Understanding JavaScript Core: Scope

關於做用域：About Scope

做用域是程序設計裏的基礎特性，是做用域使得程序運行時可使用變量存儲值、記錄和改變程序的「狀態」。JavaScript 也絕不例外，但在 JavaScript 中做用域的特性與其餘高級語言稍有不一樣，這是不少學習者久久難以理清的一個核心知識點。javascript

定義：Definition

首先引用兩處我認爲比較精闢的對做用域定義的總結：html

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.java

翻譯：做用域是在運行時對代碼某些特定部分中的變量、函數和對象的可訪問性。換句話說，做用域決定代碼區域中變量和其餘資源的可見性。git

Scope is the set of rules that determines where and how a variable (identifier) can be looked-up.es6

翻譯：做用域是一套規則，決定變量定義在何處以及如何查找變量。github

綜上所述，咱們能夠把做用域理解成是在一套在程序運行時控制變量訪問的管理機制。它規定了變量可見的區域、變量查找規則、嵌套時的檢索方法。編程

目的：Purpose

利用做用域是爲了遵循程序設計中的最小訪問原則，也稱最小特權原則，這是一種以安全性爲考量的程序設計原則，能夠便於快速定位錯誤，將發生錯誤時的損失控制在最低程度。這篇文章的這一部分舉了一個電腦管理員的例子來講明最小訪問原則在計算機領域的重要性。瀏覽器

在編程語言中，做用域還有另外兩個好處——規避變量名稱衝突和隱藏內部實現。安全

咱們知道每一個做用域具備本身的權利控制範圍，在不一樣的做用域中定義相同名稱的變量是徹底可行的。實現這一可能性的底層機制叫作「遮蔽效益」。這一機制體在嵌套做用域下獲得了更好的體現，由於變量查找的規則是逐級向上，遇到匹配則中止，當內外層都有同名變量的時候，如已在內層找到匹配的變量，就不會再繼續向外層做用域查找了，就像是內層的變量把外層的同名變量遮蔽住了同樣。是否是感受很是熟悉？沒錯，這也是 JavaScript 中原型鏈查找的內部機制！數據結構

隱藏內部實現實際上是一種編程的最佳實踐，由於只要編程者願意，大可暴露出所有代碼的內部實現細節。但衆所周知，這是不安全的。若是第三者在不可控的狀況下修改了正常代碼，影響程序的運行，這將帶來災難性的後果，這不只是庫開發者們首先會考慮的安全性問題，也是業務邏輯開發者們須要謹慎對待的可能衝突，這就是模塊化之因此重要的緣由。其餘編程語言在語法特性層面就支持共有和私有做用域的概念，而 JavaScript 官方暫時尚未正式支持。目前用以隱藏內部實現的模塊模式主要依賴閉包，因此閉包這一在JS領域具備獨特神祕性的機制被廣大開發者們又恨又愛。即使 ES6 的新模塊機制支持以文件形式劃分模塊，仍然離不開閉包。

生成：Generate

做用域的生成主要依靠詞法定義，許多語言中有函數做用域和塊級做用域。JavaScript 主要使用的是函數做用域。怎麼理解詞法定義做用域？詞法就是書寫規則，編譯器會按照所書寫的代碼肯定出做用域範圍。

大多數編程語言裏都用 {} 來包裹一些代碼語句，編譯器就會將它理解爲一個塊級，它內部的範圍就是這個塊級的做用域，函數也是如此，寫了多少個函數就有相應數量的做用域。雖然 JavaScript 是少數沒有實現塊級做用域的編程語言，但其實在早期的 JavaScript 中就有幾個特性能夠變相實現塊級做用域，如 with、catch 語句：with 語句會根據傳入的對象建立出一個特殊做用域，只在 with 中有效；而 catch 語句中捕捉到的錯誤變量在外部沒法訪問的緣由，正是由於它建立出了一個本身的塊級做用域，據 You Don't Know JS 的做者說市面上支持塊級做用域書寫風格的轉譯插件或 CoffeeScript 之類的轉譯語言內部都是依靠 catch 來實現的，that's so tricky!

相關概念：Relevant Concepts

在這裏只討論 JavaScript 中如下概念的內容和實現方式。

詞法做用域：Lexical Scope

經過上面所說的相關知識能夠總結出詞法做用域就是按照書寫時的函數位置來決定的做用域。

看看下面這段代碼，這段代碼展現了除全局做用域以外的 3 個函數做用域，分別是函數 a 、函數 b 、函數 c 所各自擁有的地盤：

function a () {
    var aa = 'aa';
    function b () {
        var bb = 'bb'
        console.log(aa, bb)
        c();
    }
    b();
}

function c () {
    var cc = 'cc'
    console.log(aa, bb, cc)
}
a();
複製代碼

各個變量所屬的做用域範圍是顯而易見的，但這段代碼的執行結果是什麼呢？一但面臨嵌套做用域的情景，或許不少人又要猶疑了，接下來纔是詞法做用域的重點。

上面代碼的執行結果以下所示：

// b()：
aa bb
// c()：
Uncaught ReferenceError: aa is not defined
複製代碼

函數 c 的運行報錯了！錯誤說沒有找到變量 aa。按照函數調用時的代碼來看，函數 c 寫在函數 b 裏，按道理來說，函數 c 不是應該能夠訪問它嵌套的兩層父級函數做用域麼？從執行結果得知，詞法做用域不關心函數在哪裏調用，只關心函數定義在哪裏，因此函數 c 其實直接存在全局做用域下，與函數 a 同級，它倆根本就是沒有任何交點的世界，沒法互相訪問，這就是詞法做用域的法則！

請謹記 JavaScript 就是一個應用詞法做用域法則的世界。而按照函數調用時決定的做用域叫作動態做用域，在 JavaScript 裏咱們不關心它，因此把它扔出字典。

函數做用域：Function Scope

很長時間以來，JavaScript 裏只存在函數做用域（讓咱們暫時忽略那些裏世界的塊級做用域 tricky），全部的做用域都是以函數級別存在。對此作出最明顯反證的就是條件、循環語句。函數做用域的例子在上述詞法做用域中已經獲得了很好的體現，就再也不贅述了，這裏主要探討一下函數做用域鏈的機制。

如下面一段代碼爲例：

function c () {
    var cc = 'cc'
    console.log(cc)
}
function a () {
    var aa = 'aa'
    console.log(aa)
    b();
}
function b () {
    var bb = 'bb'
    console.log(aa, bb)
}
a();
c();
複製代碼

一個程序裏能夠有不少函數做用域，引擎怎麼肯定先從哪一個做用域開始，按照詞法規則先寫先執行？固然不，這時就看誰先調用。函數在做用域中的聲明會被提高，函數聲明的書寫位置不會影響函數調用，參照上例，即使是函數 a 定義在函數 c 後面，因爲它會被先調用，因此在全局做用域以後仍是會先進入函數 a 的做用域，那函數 b 和函數 c 的順序又如何，爲了解釋清楚詞法做用域是如何與函數調用機制結合起來，接下來要分兩部分研究程序運行的細節。

都說 JavaScript 是個動態編程語言，然而它的做用域查找規則又是按照詞法做用域（也是俗稱的靜態做用域）規則來決定的，實在讓人費解。理解它動（執行時編譯）靜（運行前編譯）結合的關鍵在於引擎在執行程序時的兩個階段：編譯和運行。爲了不歧義，區分了兩個詞：

執行：引擎對程序的總體執行過程，包括編譯、運行階段。
運行：具體代碼的執行或函數調用的過程。

JavaScript 的動指的是在程序被執行時才進行編譯，僅在代碼運行前。而通常語言是先通過編譯過程，隨後纔會被執行的，編譯器與引擎執行是繼時性的。靜指函數做用域是根據編譯時按照詞法規則來肯定的，不禁調用時所處做用域決定。

簡單來講，函數的運行和其中變量的查找是兩套規則：函數做用域中的變量查找基於做用域鏈，而函數的調用順序依賴函數調用的背後機制——調用棧來決定。在編譯階段，編譯器收集了函數做用域的嵌套層級，造成了變量查找規則依賴的做用域鏈。函數調用棧使函數像棧的數據結構同樣排成隊列按照先進後出的規則前後運行，再根據JavaScript 的同步執行機制，得出正確的執行順序是：函數 a =>函數 b =>函數 c。最後再結合詞法做用域法則推斷出上面示例的執行結果僅僅是一句報錯提示：Uncaught ReferenceError: aa is not defined。把函數 b 引用的變量 aa 去掉，就能夠獲得完整的執行順序的展現。

塊級做用域：Block Scope

let、const 聲明的出現終於打破了 JavaScript 裏沒有塊級做用域的規則，咱們能夠顯示使用塊級語法 {} 或隱式地與 let、const 相結合實現塊級做用域。

隱式（let、const 聲明會自動劫持所在做用域造成綁定關係，因此下例中並非在 if 的塊級定義，而是在它的代碼塊內部建立了一個塊級做用域，注意在 if 的條件語句中 a 還沒有定義）：

if (a === 'a') {
    let a = 'a'
    console.log(a)
} else {
    console.log('a is not defined！')
}
複製代碼

顯式（顯式寫法揭露了塊級變量定義的真實所在）：

// 普通寫法，稍顯囉嗦
if (true) {
    {
        let a = 'a'
        ...
    }
}

// You Don't Know JS的做者提倡的寫法，保持let聲明在最前，與代碼塊語句區分開
if (true) {
    { let a = 'a'
        ...
    }
}

// 但願將來官方能支持的寫法
if (true) {
    let (a = 'a') {
        ...
    }
}
複製代碼

關於塊級做用域最後要關注的一個問題是暫時性死區，這個問題能夠描述爲：當提早使用了以 var 聲明的變量獲得的是 undefined，沒有報錯，而提早使用以 let 聲明的變量則會拋出 ReferenceError。暫時性死區就是用來解釋這個問題的緣由。很簡單，規範不容許在尚未運行到聲明語句時就引用變量。來看一下根據官方非正式規範得出的解釋：

When a JavaScript engine looks through an upcoming block and finds a variable declaration, it either hoists the declaration to the top of the function or global scope (for var) or places the declaration in the TDZ (for let and const). Any attempt to access a variable in the TDZ results in a runtime error. That variable is only removed from the TDZ, and therefore safe to use, once execution flows to the variable declaration.

翻譯：當 JavaScript 引擎瀏覽即將出現的代碼塊並查找變量聲明時，它既把聲明提高到了函數的頂部或全局做用域（對於 var ），也將聲明放入暫時性死區（對於 let 和const）。任何想要訪問暫時性死區中變量的嘗試都會致使運行時錯誤。只有當執行流到達變量聲明的語句時，該變量纔會從暫時性死區中移除，能夠安全訪問。

另外，把 let 跟 var 聲明做兩點比較能更好排除其餘疑惑。如下述代碼爲例：

console.log(a);
var a;
console.log(b);
let b;
複製代碼

變量提高：let 與 var 定義的變量同樣都存在提高。
默認賦值：let 與 var 聲明卻未賦值的變量都至關於默認賦值 undefined。

let 與 var 聲明提早引用致使的結果的區別僅僅是由於在編譯器在詞法分析階段，將塊級做用域變量作了特殊處理，用暫時性死區把它們包裹住，保持塊級做用域的特性。

全局做用域：Global Scope

全局做用域彷彿是透明存在的，容易受到忽視，就像人們常常忘記身處氧氣包裹中同樣，變量沒法超越全局做用域存在，人們也沒法脫離地球給咱們提供的氧氣圈。簡而言之，全局做用域就是運行時的頂級做用域，一切的一切都歸屬於頂級做用域，它的地位如同宇宙。

咱們在全部函數以外定義的變量都歸屬於全局做用域，這個「全局」視 JavaScript 代碼運行的環境而定，在瀏覽器中是 window 對象，在 Node.js 裏就是 global 對象，或許之後還會有更多其餘的全局對象。全局對象擁有的勢力範圍就是它們的做用域，定義在它們之中的變量對全部其餘內層做用域都是可見的，即共享，因此開發者們都很是討厭在全局定義變量，這繼承自上面所說的最小特權原則的思想，爲安全起見，定義在全局做用域裏的變量越少越好，因而一個叫作全局污染的話題由此引起。

全局做用域在運行時會由引擎建立，不須要咱們本身來實現。

局部做用域：Local Scope

與全局做用域相對的概念就是局部做用域，或者叫本地做用域。局部做用域就是在全局做用域之下建立的任何內層做用域，能夠說咱們定義的任何函數和塊級做用域都是局部做用域，通常在用來與全局做用域作區別的時候纔會採用這種歸納說法。在開發中，咱們主要關心的是使用函數做用域來實現局部做用域的這一具體方式。

公有做用域：Public Scope

公有做用域存在於模塊中，它是提供項目中全部其餘模塊均可以訪問的變量和方法的範圍或命名空間。公私做用域的概念與模塊化開發息息相關，咱們一般關心的是定義在公私做用域中的屬性或方法。

模塊化提供給程序更多的安全性控制，並隱蔽內部實現細節，可是要讓程序很好的實現功能，咱們有訪問模塊內部做用域中數據的須要。從做用域鏈的查找機制可知，外層做用域是沒法訪問內層做用域變量的，而JavaScript 中公私做用域的概念也不像其餘編程語言中那麼完整，不能經過詞法直接定義公有和私有做用域變量，因此閉包成爲了模塊化開發中的核心力量。

閉包實現了在外層做用域中訪問內層做用域變量的可能，其方法就是在內層函數裏再定義一個內層函數，用來保留對想要訪問的函數做用域的內存引用，這樣外層做用域就能夠經過這個保留引用的閉包來訪問內層函數裏的數據了。

經過下面兩段代碼的執行結果就能看出區別：

function a () {
    var aa = 'aa'
    function b () {
        var bb = 'bb'
    }
    b()
    console.log(bb)
}
a()
複製代碼

控制檯報錯：Uncaught ReferenceError: bb is not defined，由於函數 b 在運行完後就從執行棧裏出棧了，其內存引用也被內存回收機制清理掉了。

function a () {
    var aa = 'aa'
    function b () {
        var bb = 'bb'
        return function c () {
            console.log(bb)
        }
    }
    var c = b()
    console.log(c())
}
a()
複製代碼

而這段代碼中用變量 c 保留了對函數 b 中返回的函數 c 的引用，函數 c 又根據詞法做用域法則，可以進入函數 b 的做用域查找變量，這個引用造成的閉包就被保存在函數 a 中變量 c 的值中，函數 a 能夠在任何想要的時候調用這個閉包來獲取函數 b 裏的數據。此時這個被返回的變量 bb 就成爲了暴露在函數 a 的做用域範圍內，定義在函數 b 裏的公有做用域變量。

更加通用的實現公有做用域變量或 API 的方式，稱爲模塊模式：

var a = (function a () {
    var aa = 'aa'
    function b () {
        var bb = 'bb'
        console.log(bb)
    }
    return {
        aa: aa,
        b: b
    }
})()
console.log(a.aa)
a.b()
複製代碼

使用閉包實現了一個單例模塊，輸出了共有變量 a.aa 和共有方法也稱 API 的 a.b。

私有做用域：Private Scope

相對於公有做用域，私有做用域是存在於模塊中，只能提供由定義模塊直接訪問的變量和方法的範圍或命名空間。要澄清一個關於私有做用域變量的的誤會，定義私有做用域變量，不必定是要徹底避免被外部模塊或方法訪問，更多時候是禁止它們被直接訪問。大多時候能夠經過模塊暴露出的公有方法來間接地訪問私有做用域變量，固然想不想讓它被訪問或者如何限制它的增刪改查就是開發者本身掌控的事情了。

接着上述公有做用域的實現，來看看私有做用域的實現。

var a = (function a () {
    var bb = 'bb'
    var cc = 'c'
    function b () {
        console.log(bb)
    }
    function c () {
        cc = 'cc'
        console.log(cc)
    }
    return {
        b: b,
        c: c
    }
})()
a.b()
a.c()
複製代碼

在模塊 a 中定義的屬性 bb 和 cc 都是沒法直接經過引用來獲取的。可是模塊暴露的兩個方法 b 和 c，分別實現了一個查找操做和修改操做，間接控制模塊中上述兩個私有做用域變量。

做用域與This：Scope vs This

在對做用域是什麼的理解中，最大的一個誤區就是把做用域看成 this 對象。

一個鐵打的證據是函數做用域的肯定是在詞法分析時，屬於編譯階段，而 this 對象是在運行時動態綁定到函數做用域裏的。另外一個更明顯的證據是當函數調用時，它們內部的 this 指的是全局對象，而不是函數自己，想必全部開發者都踩過這一坑，可以理解做用域與 this 本質上的區別。從這兩點就能夠確定決不能把做用域與 this 等同對待。

this 究竟是什麼？它跟做用域有很大關係，但具體留到之後再討論吧。在此以前咱們先要與做用域成爲好朋友。