浅谈 JS 执行上下文和作用域

一、JS 中的执行上下文。

1. 变量或函数的上下文决定了它们能够访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象。而这个上下文中定义的所有变量和函数都存在于这个（window）对象上。

2. 所有通过 var 声明的变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链的解析上效果是一样的。

3. 上下文在其的所有代码执行完毕后会被摧毁，包括定义在它上面的所有变量与函数（全局上下文的应用程序退出前才会被摧毁，例：关闭网页或退出浏览器）。

4. 每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。在函数执行完之后，上下文栈会弹出该函数的上下文，将控制权返还给之前的执行上下文。

5. 上下文的代码在执行的时候，会创建变量对象的一个作用域链。这个作用域决定了访问了各级上下文的代码在访问变量和函数时的顺序。

6. 全局上下文的变量对象始终是作用域链的最后一个变量对象。

7. 作用域链的搜索过程始终是最前端开始，然后逐级往后，直到找到标识符。函数 onChangeSize 之所以能够访问变量 size，就是因为可以在作用域上找到它。

var color = "yellow"
function onChangeColor() {
  if (color === "blue") {
    color = "red"
  } else {
    color = "blue"
  }
}
onChangeColor();

8. 局部作用域中定义的变量可在局部上下文中替换成全局变量。

var color = "yellow"
function onChangeColor() {
  let anotherColor = "blue";
  function swapColors() {
    let tempColor = anotherColor;
    anotherColor = color; // yellow
    color = tempColor; // blue
  }
}

无标题.png

9. 内部上下文可以通过作用域链访问外部上下文的一切，但外部上下文无法访问内部上下文的任何东西，上下文之间是有线性的、有序的。每个上下文都可以到上一级的作用域链去探索变量和函数。