JavaScript作用域与执行上下文

作用域的类型

全局作用域

函数作用域

块级作用域（ES6）

let const

• 不允许重复声明
• 不存在声明提升
• 存在块级作用域​
• 顶层对象的属性与全局变量脱钩​

临时死区（TDZ）

JavaScript 引擎在扫描代码发现变量声明时，要么将它们提升到作用域顶部(遇到 var 声明)，要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后，变量才会从 TDZ 中移出，然后方可访问。

循环中的块级作用域

for
每次都创建了一个新的变量，在迭代中修改变量的值。

var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 3

//解决方案
var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = (function(i){
        return function() {
            console.log(i);
        }
    }(i))
}
funcs[0](); // 0

for-in
在 for in 循环中，每次迭代不会修改已有的绑定，而是会创建一个新的绑定。

var funcs = [], object = {a: 1, b: 1, c: 1};
for (var key in object) {
    funcs.push(function(){
        console.log(key)
    });
}
funcs[0]() //'c'

var funcs = [], object = {a: 1, b: 1, c: 1};
for (let key in object) {
    funcs.push(function(){
        console.log(key)
    });
}
funcs[0]() //'a'

var funcs = [], object = {a: 1, b: 1, c: 1};
for (const key in object) {
    funcs.push(function(){
        console.log(key)
    });
}
funcs[0]() //'a'

参考文章：https://segmentfault.com/a/11...

作用域的工作模型

• 词法作用域（静态作用域）
• 动态作用域

JavaScript 采用的是词法作用域，函数的作用域在函数定义的时候就决定了。函数的作用域基于函数创建的位置。
与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。

例：

var value = 1; 
function foo() { 
    console.log(value); 
} 
function bar() { 
    var value = 2; 
    foo(); 
} 
bar();

• 假设JavaScript采用静态作用域，让我们分析下执行过程：

执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。

• 假设JavaScript采用动态作用域，让我们分析下执行过程：

执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。

前面我们已经说了，JavaScript采用的是静态作用域，所以这个例子的结果是 1。

参考文章：https://segmentfault.com/a/11...

执行上下文

对于每个执行上下文，都有三个重要属性：

• 变量对象(Variable object，VO)
• 作用域链(Scope chain)
• this

变量对象（vo）

全局上下文下的变量对象

全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。

函数上下文下的变量对象

在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。

执行过程

1. 进入执行上下文
2. 代码执行

进入执行上下文

当进入执行上下文时，这时候还没有执行代码，变量对象会包括：

1. 函数的所有形参 (如果是函数上下文)

   • 由名称和对应值组成的一个变量对象的属性被创建
   • 没有实参，属性值设为 undefined

2. 函数声明

   • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
   • 如果变量对象已经存在相同名称的属性，则完全替换这个属性

3. 变量声明

   • 由名称和对应值（undefined）组成一个变量对象的属性被创建；
   • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子：

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

在进入执行上下文后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值
还是上面的例子，当代码执行完后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

总结:

1. 全局上下文的变量对象初始化是全局对象
2. 函数上下文的变量对象初始化只包括 Arguments 对象
3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
4. 在代码执行阶段，会再次修改变量对象的属性值

参考文章：https://segmentfault.com/a/11...

作用域链(Scope chain)

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

参考文章：https://segmentfault.com/a/11...

this

参考文章：https://segmentfault.com/a/11...