深刻理解JavaScript做用域和做用域鏈

前言

JavaScript中有一個被稱爲做用域(Scope)的特性。雖然對於許多新手開發者來講，做用域的概念並非很容易理解，本文我會盡我所能用最簡單的方式來解釋做用域和做用域鏈，但願你們有所收穫！

想閱讀更多優質文章請猛戳GitHub博客

做用域(Scope)

1.什麼是做用域

做用域是在運行時代碼中的某些特定部分中變量，函數和對象的可訪問性。換句話說，做用域決定了代碼區塊中變量和其餘資源的可見性。可能這兩句話並很差理解，咱們先來看個例子：

function outFun2() {
    var inVariable = "內層變量2";
}
outFun2();//要先執行這個函數，不然根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

從上面的例子能夠體會到做用域的概念，變量inVariable在全局做用域沒有聲明，因此在全局做用域下取值會報錯。咱們能夠這樣理解：做用域就是一個獨立的地盤，讓變量不會外泄、暴露出去。也就是說做用域最大的用處就是隔離變量，不一樣做用域下同名變量不會有衝突。

ES6 以前 JavaScript 沒有塊級做用域,只有全局做用域和函數做用域。ES6的到來，爲咱們提供了‘塊級做用域’,可經過新增命令let和const來體現。

2.全局做用域和函數做用域

在代碼中任何地方都能訪問到的對象擁有全局做用域，通常來講如下幾種情形擁有全局做用域：

• 最外層函數 和在最外層函數外面定義的變量擁有全局做用域

var outVariable = "我是最外層變量"; //最外層變量
function outFun() { //最外層函數
    var inVariable = "內層變量";
    function innerFun() { //內層函數
        console.log(inVariable);
    }
    innerFun();
}
console.log(outVariable); //我是最外層變量
outFun(); //內層變量
console.log(inVariable); //inVariable is not defined
innerFun(); //innerFun is not defined

• 全部末定義直接賦值的變量自動聲明爲擁有全局做用域

function outFun2() {
    variable = "未定義直接賦值的變量";
    var inVariable2 = "內層變量2";
}
outFun2();//要先執行這個函數，不然根本不知道里面是啥
console.log(variable); //未定義直接賦值的變量
console.log(inVariable2); //inVariable2 is not defined

• 全部window對象的屬性擁有全局做用域

通常狀況下，window對象的內置屬性都擁有全局做用域，例如window.name、window.location、window.top等等。

全局做用域有個弊端：若是咱們寫了不少行 JS 代碼，變量定義都沒有用函數包括，那麼它們就所有都在全局做用域中。這樣就會 污染全局命名空間, 容易引發命名衝突。

// 張三寫的代碼中
var data = {a: 100}

// 李四寫的代碼中
var data = {x: true}

這就是爲什麼 jQuery、Zepto 等庫的源碼，全部的代碼都會放在(function(){....})()中。由於放在裏面的全部變量，都不會被外泄和暴露，不會污染到外面，不會對其餘的庫或者 JS 腳本形成影響。這是函數做用域的一個體現。

函數做用域,是指聲明在函數內部的變量，和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部。

function doSomething(){
    var blogName="浪裏行舟";
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(blogName); //腳本錯誤
innerSay(); //腳本錯誤

做用域是分層的，內層做用域能夠訪問外層做用域的變量，反之則不行。咱們看個例子，用泡泡來比喻做用域可能好理解一點：

最後輸出的結果爲 2, 4, 12

• 泡泡1是全局做用域，有標識符foo；
• 泡泡2是做用域foo，有標識符a,bar,b；
• 泡泡3是做用域bar，僅有標識符c。

值得注意的是：塊語句（大括號「｛｝」中間的語句），如 if 和 switch 條件語句或 for 和 while 循環語句，不像函數，它們不會建立一個新的做用域。在塊語句中定義的變量將保留在它們已經存在的做用域中。

if (true) {
    // 'if' 條件語句塊不會建立一個新的做用域
    var name = 'Hammad'; // name 依然在全局做用域中
}
console.log(name); // logs 'Hammad'

JS 的初學者常常須要花點時間才能習慣變量提高，而若是不理解這種特有行爲，就可能致使
bug 。正由於如此， ES6 引入了塊級做用域，讓變量的生命週期更加可控。

3.塊級做用域

塊級做用域可經過新增命令let和const聲明，所聲明的變量在指定塊的做用域外沒法被訪問。塊級做用域在以下狀況被建立：

1. 在一個函數內部
2. 在一個代碼塊（由一對花括號包裹）內部

let 聲明的語法與 var 的語法一致。你基本上能夠用 let 來代替 var 進行變量聲明，但會將變量的做用域限制在當前代碼塊中。塊級做用域有如下幾個特色：

• 聲明變量不會提高到代碼塊頂部

let/const 聲明並不會被提高到當前代碼塊的頂部，所以你須要手動將 let/const 聲明放置到頂部，以便讓變量在整個代碼塊內部可用。

function getValue(condition) {
if (condition) {
let value = "blue";
return value;
} else {
// value 在此處不可用
return null;
}
// value 在此處不可用
}

• 禁止重複聲明

若是一個標識符已經在代碼塊內部被定義，那麼在此代碼塊內使用同一個標識符進行 let 聲明就會致使拋出錯誤。例如：

var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared

在本例中， count 變量被聲明瞭兩次：一次使用 var ，另外一次使用 let 。由於 let 不能在同一做用域內重複聲明一個已有標識符，此處的 let 聲明就會拋出錯誤。但若是在嵌套的做用域內使用 let 聲明一個同名的新變量，則不會拋出錯誤。

var count = 30;
// 不會拋出錯誤
if (condition) {
let count = 40;
// 其餘代碼
}

• 循環中的綁定塊做用域的妙用

開發者可能最但願實現for循環的塊級做用域了，由於能夠把聲明的計數器變量限制在循環內，例如：

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined

上面代碼中，計數器i只在for循環體內有效，在循環體外引用就會報錯。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代碼中，變量i是var命令聲明的，在全局範圍內都有效，因此全局只有一個變量i。每一次循環，變量i的值都會發生改變，而循環內被賦給數組a的函數內部的console.log(i)，裏面的i指向的就是全局的i。也就是說，全部數組a的成員裏面的i，指向的都是同一個i，致使運行時輸出的是最後一輪的i的值，也就是 10。

若是使用let，聲明的變量僅在塊級做用域內有效，最後輸出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代碼中，變量i是let聲明的，當前的i只在本輪循環有效，因此每一次循環的i其實都是一個新的變量，因此最後輸出的是6。你可能會問，若是每一輪循環的變量i都是從新聲明的，那它怎麼知道上一輪循環的值，從而計算出本輪循環的值？這是由於 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算。

另外，for循環還有一個特別之處，就是設置循環變量的那部分是一個父做用域，而循環體內部是一個單獨的子做用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代碼正確運行，輸出了 3 次abc。這代表函數內部的變量i與循環變量i不在同一個做用域，有各自單獨的做用域。

做用域鏈

1.什麼是自由變量

首先認識一下什麼叫作 自由變量 。以下代碼中，console.log(a)要獲得a變量，可是在當前的做用域中沒有定義a（可對比一下b）。當前做用域沒有定義的變量，這成爲 自由變量 。自由變量的值如何獲得 —— 向父級做用域尋找（注意：這種說法並不嚴謹，下文會重點解釋）。

var a = 100
function fn() {
    var b = 200
    console.log(a) // 這裏的a在這裏就是一個自由變量
    console.log(b)
}
fn()

2.什麼是做用域鏈

若是父級也沒呢？再一層一層向上尋找，直到找到全局做用域仍是沒找到，就宣佈放棄。這種一層一層的關係，就是 做用域鏈 。

var a = 100
function F1() {
    var b = 200
    function F2() {
        var c = 300
        console.log(a) // 自由變量，順做用域鏈向父做用域找
        console.log(b) // 自由變量，順做用域鏈向父做用域找
        console.log(c) // 本做用域的變量
    }
    F2()
}
F1()

3.關於自由變量的取值

關於自由變量的值，上文提到要到父做用域中取，其實有時候這種解釋會產生歧義。

var x = 10
function fn() {
  console.log(x)
}
function show(f) {
  var x = 20
  (function() {
    f() //10，而不是20
  })()
}
show(fn)

在fn函數中，取自由變量x的值時，要到哪一個做用域中取？——要到建立fn函數的那個做用域中取，不管fn函數將在哪裏調用。

因此，不要在用以上說法了。相比而言，用這句話描述會更加貼切:**要到建立這個函數的那個域」。
做用域中取值,這裏強調的是「建立」，而不是「調用」**，切記切記——其實這就是所謂的"靜態做用域"

var a = 10
function fn() {
  var b = 20
  function bar() {
    console.log(a + b) //30
  }
  return bar
}
var x = fn(),
  b = 200
x() //bar()

fn()返回的是bar函數，賦值給x。執行x()，即執行bar函數代碼。取b的值時，直接在fn做用域取出。取a的值時，試圖在fn做用域取，可是取不到，只能轉向建立fn的那個做用域中去查找，結果找到了,因此最後的結果是30

做用域與執行上下文

許多開發人員常常混淆做用域和執行上下文的概念，誤認爲它們是相同的概念，但事實並不是如此。

咱們知道JavaScript屬於解釋型語言，JavaScript的執行分爲：解釋和執行兩個階段,這兩個階段所作的事並不同：

解釋階段：

• 詞法分析
• 語法分析
• 做用域規則肯定

執行階段：

• 建立執行上下文
• 執行函數代碼
• 垃圾回收

JavaScript解釋階段便會肯定做用域規則，所以做用域在函數定義時就已經肯定了，而不是在函數調用時肯定，可是執行上下文是函數執行以前建立的。執行上下文最明顯的就是this的指向是執行時肯定的。而做用域訪問的變量是編寫代碼的結構肯定的。

做用域和執行上下文之間最大的區別是：
執行上下文在運行時肯定，隨時可能改變；做用域在定義時就肯定，而且不會改變。

一個做用域下可能包含若干個上下文環境。有可能歷來沒有過上下文環境（函數歷來就沒有被調用過）；有可能有過，如今函數被調用完畢後，上下文環境被銷燬了；有可能同時存在一個或多個（閉包）。同一個做用域下，不一樣的調用會產生不一樣的執行上下文環境，繼而產生不一樣的變量的值。

給你們推薦一個好用的BUG監控工具Fundebug，歡迎免費試用！

歡迎關注公衆號：前端工匠，你的成長咱們一塊兒見證！若是你感受有收穫，歡迎給我打賞,以激勵我更多輸出優質開源內容

參考文章和書籍

• 深刻理解javascript原型和閉包系列
• Web 前端面試指南與高頻考題解析
• 深刻理解JS中聲明提高、做用域（鏈）和this關鍵字
• JavaScript 開發進階：理解 JavaScript 做用域和做用域鏈
• JavaScript 做用域和做用域鏈
• 深刻理解ES6