作用域 VS 执行上下文

笔者在前文 作用域执行上下文 中介绍过作用域和执行上下文,它们是 JavaScript 中很重要的知识点,是基础中的重点,是重点中的基础。

我们讲过 JavaScript 中的作用域是词法作用域,与在哪里定义有关;而执行上下文则和调用有关,两者有关联但却是不同概念

作用域

  • 作用域与哪里定义有关,在引擎编译时就知道它在哪里定义
  • 其中函数作用域最为重要,因为作用域中的变量,作用域外不能访问,这起到了保护变量的作用
  • 无生命周期
  • 它可以理解为是“静态”的(词法作用域)
  • 共全局作用域、函数作用域、块级作用域、eval 作用域

执行上下文

  • 而执行上下文与调用有关
  • 它表示一段代码执行时所带的所有信息
    • 包括 this、词法环境、变量环境(ES5标准)
    • 结合之前 this 所给的定义:谁调用它,this 就指向谁 就是和执行上下文相关。执行上下文也是如此,与调用者息息相关
  • 生命周期为两个阶段
    • 创建阶段
      • 确定 this 指,即我们熟知的 this 绑定
      • 创建变量环境
        • 环境记录器
          • 登记 var、function 等声明的变量
          • 此时会发生变量提升和函数提升
        • 对外部环境的引用(outer)
          • 指向父作用域(作用域在代码执行前就确定了)
      • 创建词法环境
        • 环境记录器
          • 登记 let、const 等声明的变量
          • 会发生变量提升(hoist),但是不会被初始化,所以提前使用会报 ReferenceError,如例1所示
        • 对外部环境的引用(outer)
          • 同样指向父作用域
    • 执行阶段
      • 指向代码
      • 确定作用域链
  • 它则是“动态”的(与调用方相关)
  • 共全局执行上下文、函数执行上下文、模块执行上下文、eval 执行上下文

例子1:

a // undefined
b // ReferenceError
c // ReferenceError
d // function d() {}

var a = 1;
let b = 2;
const c = 3;
function d(){}

var 声明变量会被初始化为 undefined,一般函数(函数声明式写法)定义会被初始化为 function xx(){} ,let、const 则不会被初始化,所以 var 定义的变量可以提前使用但指为 undefined,一般函数定义可以正常提前使用,let、const 提前使用则会报错

PS,如果使用函数表达式写法使用函数,则跟变量,如 var e = function(){} 或者 let f = () => {}

以上就是作用域和指向上下文的各种区别

Last Updated:
Contributors: johan