理解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函数作用域链和当前调用栈

changeColor函数作用域链和当前调用栈

2. 下图是swapColor函数作用域链和当前调用栈
   
   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);

调用栈