理解JavaScript中的作用域

執行環境及作用域

執行環境定義了變量和函數有權訪問的其他數據，決定了它們各自的行爲。

執行環境，或者叫執行上下文，每個執行環境都有一個與之關聯的是 變量對象。存儲了所有變量和函數。

執行環境分爲：全局執行環境、函數執行環境、eval執行環境。

在Web瀏覽器中，全局執行環境被認爲是window對象。

每個函數都有自己的指定環境。當執行流進入一個函數，函數的環境會被推入一個環境棧（調用棧）
調用棧 中存放的就是執行上下文（變量對象）。

作用域：就是變量和函數的可訪問範圍。

作用域分爲：全局作用域、函數作用域、塊級作用域

當代碼在一個環境中執行時，會創建變量對象的一個作用域鏈。作用域鏈的用途是，保證對執行環境有權訪問的變量和函數可以有序訪問。

代碼和圖例

var color = 'blue';
function changeColor() {
  var anotherColor = 'red';
  
  function swapColor() {
    var tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;
  }
  
  swapColor();
}
changeColor();

通過Chrome瀏覽器的控制檯可以看到調用棧（Call Stack）和作用域（Scope）信息

1. 下圖是changeColor函數作用域鏈和當前調用棧

2. 下圖是swapColor函數作用域鏈和當前調用棧
   

當changeColor函數第一次調用時，會創建一個執行環境及相應的作用域鏈，並把作用域鏈賦值給一個特殊的內部屬性[[Scope]]。然後使用this，arguments和其他參數的值來初始化活動對象（變量對象）。外部函數始終處於作用域第二位，外部函數的外部函數處於第三位，…直到座位作用域鏈終點的全局執行環境。

調用棧圖例

當某個函數第一次被調用時，會創建一個執行環境及相應的作用域鏈，並把作用域鏈賦值給一個特殊的內部屬性[[Scope]]

var a = 2;
function add(b,c){
  return b+c;
}
function addAll(b,c){
    var d = 10;
  result = add(b,c)
  return a+result+d;
}
addAll(3,6);