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

• 做者：浪裏行舟

Fundebug經受權轉載，版權歸原做者全部。

前言

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

做用域(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 循環的塊級做用域了，由於能夠把聲明的計數器變量限制在循環內，例如，如下代碼在 JS 常常見到：

<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
<script type="text/javascript">
   var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '個')
      }
    }
</script>
複製代碼

咱們要實現這樣的一個需求: 點擊某個按鈕, 提示"點擊的是第 n 個按鈕",此處咱們先不考慮事件代理,萬萬沒想到，點擊任意一個按鈕，後臺都是彈出「第四個」,這是由於 i 是全局變量,執行到點擊事件時，此時 i 的值爲 3。那該如何修改，最簡單的是用 let 聲明 i

for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
      console.log('第' + (i + 1) + '個')
    }
  }
複製代碼

做用域鏈

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 的指向是執行時肯定的。而做用域訪問的變量是編寫代碼的結構肯定的。

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

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

參考文章和書籍

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

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！