执行上下文与作用域

果冻与布丁
177 阅读8分钟

概念

  • 变量或函数的上下文决定了它们可以访问哪些数据，以及它们的行为

  • 每个上下文都有一个关联的变量对象(variable object)，而这个上下文中定义的所有变量和函数都存在于这个对象上。虽然无法 通过代码访问变量对象，但后台处理数据会用到它

  • 全局上下文是最外层的上下文，根据宿主环境的不同，全局上下文的对象可能不同，在浏览器中，它是 window

  • 所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法

  • 使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的

  • 上下文在其所有代码都执行完毕后会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退 出前才会被销毁，比如关闭网页或退出浏览器）

  • 每个函数调用都有自己的上下文

  • 当代码执行流进入函数时，函数的上下文被推到一个上下文栈上

  • 在函数执行完之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文，ECMA 的执行流就是通过这个上下文栈进行控制的

  • 上下文中的代码在执行的时候，会创建变量对象的一个作用域链 (scope chain)

  • 作用域链决定了各级上下文中的代码在访问变量和函数时的顺序

  • 代码正在执行的上下文的变量对象始终位于作用域链的最前端，如果上下文是函数，则其活动对象(activation object)用作变量对象

  • 活动对象最初只有一个定义变量：arguments （全局上下文中没有这个变量）

  • 作用域链中的下一个变量对象来自包含上下文，再下一个对象来自再下一个包含上下文，以此类推直至全局上下文，直至全局上下文

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

  • 代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链的最前端开始，然后逐级往后，直到找到标识符（如果没有找到标识符，那么通常会报错）

  • 其实说的这么复杂，基于我自己的理解简单来说

    • 上下文：执行环境 - 它决定了代码执行过程中可以访问哪些数据 - 在代码执行过后，内部栈会弹出该上下文，把执行权交给执行上下文
    • 作用域：可访问变量的集合
    • 作用域链：访问数据的顺序，由内向外，直到全局上下文(例如 window)，如果访问不到指定数据，有标识符(变量定义)的 返回 undefined，否则一般会报错
    • 它们解释了 JavaScript 如何找到我们定义的函数和变量

作用域链增强

  • 虽然执行上下文主要有全局上下文和函数上下文两种（ eval() 调用内部存在第三种上下文），但有其他方式来增强作用域链
  • 某些语句会导致在作用域链前端临时添加一个上下文，这个上下文在代码执行后会被删除
  • 通常在两种情况下会出现这个现象，即代码执行到下面任意一种情况时：
    • try / catch 语句中的 catch 块
      • 创建一个新的变量对象，这个变量对象会包含要抛出的 错误对象的声明
    • with 语句
      • 向作用域链前端添加指定的对象
  • 注意：IE的实现在IE8之前是有偏差的，即它们会将 catch 语句中捕获的错误添加到执行上下文的变量对象上，而不是 catch 语句的变量对象上，导致在 catch 块外部都可以访问到错误。IE9纠正了这个问题

变量声明

  • 直到 ES5.1 之前，var 都是声明变量的唯一关键词。ES6 新增了 let 和 const，并且让他们成为首选

使用 var 的函数作用域声明

  • 在使用 var 声明变量时，变量会被自动添加到最接近的上下文。如果变量未经声明（不加 var）就被初始化了，那么它就会自动被添加到全局上下文

  • 注意：在严格模式下，未经声明就初始化变量会报错

  • var 声明会被拿到函数或全局作用域的顶部，位于作用域中所有代码之前，这个现象叫作“提升” (hoisting)，提升让同一作用域中的代码不必考虑变量是否已经声明就可以直接使用

  • 但实际实践上，变量提升其实很恶心人，在变量声明之前使用变量竟然是合法的

console.log(nume); // undefined
var name = 'name';

使用 let 的块级作用域声明

  • ES6 新增的 let 关键字跟 var 很相似，但它的作用域是块级的，块级作用域由最近的一堆包括花括号 {} 界定
if(true) {
  let a = 1;
}

console.log(a); // not defined
  • 它与 var 的另一个不同是不能在同一作用域内不能声明两次，重复 var 声明会被忽略，而 let 会报错
var a = 1;
var a = 2;
console.log(a); // 2
let b = 3;
b = 4; // 报错
  • 使用 var 声明的迭代变量会泄漏到循环外部，而let 的行为非常适合在循环中声明迭代变量，可以避免这种情况
for (var i = 0; i < document.querySelectorAll('div').length; i++) {
  document.querySelectorAll('div')[i].onclick = () => {
    console.log(i); // 全部点击为 document.querySelectorAll('div').length
  }
}
for (let i = 0; i < document.querySelectorAll('div').length; i++) {
  document.querySelectorAll('div')[i].onclick = () => {
    console.log(i); // 点击为下标
  }
}
  • 严格来讲，let 在运行时也会被提升，但由于 “暂时性死区”(temporal dead zone)的缘故，不能再声明之前使用 let 变量，因此，从写代码的角度来讲，它们的提升并不一样

使用 const 的常量声明

  • 除了 let，ES6 还新增了 const 关键字，使用 const 声明必须同时初始化某个值，一经声明，在其生命周期的任何时候都不能再重新赋值，除此之外与 let 无异
const a; // 报错
const b = 1;
b = 2; // 报错
  • const 声明之应用到顶级原语或对象，即赋值为对象的 const 变量不能在被重新赋值，但对象的建则不受限制
  • 如果想让整个对象都不能修改，可以使用 Object.freeze()，这样再给属性赋值虽然不会报错，但会静默失败（深层冻结需要递归）
  • 由于 const 声明暗示变量的值是单一类型且不可修改，JavaScript 运行时编译器可以将其所有实例都替换成实际的值，而不会通过查询表进行变量查找。谷歌的 V8 引擎就执行这种优化
  • 注意：如果开发流程并不会因此而受很大影响，就应该尽可能的使用 const 声明，除非雀食需要一个将来会重新赋值的变量，这样可以从根本上保证提前发现重新赋值导致的 bug

标识符查找

  • 当在特定上下文中为读取或写入而引用一个标识符时，必须通过搜索确定这个标识符表示什么。搜索开始于作用域链前端，以给定的名称搜索对应的标识符。如果在局部上下文中找到该标识符，则搜索停止，变量确定；如果没有找到变量名，则继续沿作用域链搜索
  • 注意：作用域链中的对象也有一个原型链，因此搜索可能涉及每个对象的原型链。这个过程一直持续到搜索至全局上下文的变量对象。如果仍然没有找到标识符，则说明其未声明
  • 对这个搜索过程而言，引用局部变量会让搜索自动停止，而不继续搜索下一级变量对象。也就是说，如果局部上下文中有一个同名的标识符，那就不能在该上下文中引用父上下文中的同名标识符
  • 使用块级作用域声明并不会改变搜索流程，但可以给词法层级添加额外的层次
  • 总而言之就是，就近原则 直到全局
const color1 = 'blue';
const color2 = 'red';
function getColor() {
  const color2 = 'yellow';
  return [color1, color2];
}
console.log(getColor()); // ['blue', 'yellow']
  • 注意：标识符查找并非没有代价。访问局部变量比访问全局变量要快，因为不用切换作用域。不过，JavaScript引擎在优化标识符查找上做了很多工作，将来这个差异可能就微不足道了
avatar
文章
阅读
粉丝