深入理解JavaScript执行上下文和词法环境

最新推荐文章于 2024-08-08 15:13:25 发布

原创最新推荐文章于 2024-08-08 15:13:25 发布 · 442 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #es6 #javascript #node.js #chrome

ES6 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析JavaScript的执行上下文和词法环境，包括全局与函数执行上下文、this绑定、词法环境的创建、变量环境组件以及变量提升和函数提升的概念。深入理解这些概念对掌握JavaScript执行机制至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在深入理解执行上下文和执行栈这篇博客中，我们以变量对象的观点来解释了执行上下文的创建过程。
在作用域与作用域链这篇博客中，我们以变量对象的观点解释了作用域与作用域链
接下来我们学习一下ES6中的词法环境。

一、执行上下文与词法环境

1. 什么是执行上下文

执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。

2. 执行上下文的类型

全局执行上下文
任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。
函数执行上下文
每当一个函数被调用的时候，都会为该函数创建一个函数执行上下文。函数上下文可以由任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。
Eval 函数执行上下文

3.如何创建执行上下文

现在让我们了解 JavaScript 引擎是怎样创建执行上下文的。创建执行上下文有两个阶段：1) 创建阶段和 2) 执行阶段。

创建阶段
在javascript代码执行之前，执行上下文将经历创建阶段，在创建阶段会发生下面的事：
1. this值的确定，即this绑定
2. 创建词法环境组件。
2. 创建变量环境组件。

执行上下文可以如下表示

Execution Context {
	ThisBinding = <this value>,
	LexicalEnvironment = {...}
	VariableEnvironment = {...}
}

关于this绑定

在全局执行上下文中，this 的值指向全局对象。(在浏览器中，this引用 Window 对象)。
在函数执行上下文中，this 的值取决于该函数是如何被调用的。如果它被一个引用对象调用，那么this 会被设置成那个对象，否则this 的值被设置为全局对象或者 undefined（在严格模式下）。

关于词法环境

官方的 ES6 文档把词法环境定义为

词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。

简单来说词法环境是一种持有标识符—变量映射的结构。（这里的标识符指的是变量/函数的名字，而变量是对实际对象[包含函数类型对象]或原始数据的引用）。

词法环境的确定：
JavaScript是静态作用域，词法环境是由代码结构决定的，开发把代码写成什么样，词法环境就是怎么样，跟方法在哪里调用没有关系。
词法环境的组成：环境记录器和外部环境的引用

环境记录器：环境记录器是存储变量和函数声明的实际位置
外部环境的引用：它可以访问其父级词法环境（作用域）

词法环境的类型：

全局词法环境（在全局执行上下文中）：是没有外部环境引用的词法环境。全局环境的外部环境引用是 null。它拥有内建的 Object/Array/等、在环境记录器内有原型函数（关联全局对象，比如 window 对象）还有任何用户定义的全局变量，并且 this的值指向全局对象。
函数词法环境：函数内部用户定义的变量存储在环境记录器中。并且引用的外部环境可能是全局环境，或者任何包含此内部函数的外部函数。

环境记录器分类：

声明式环境记录器：存储变量、函数和参数。在函数环境中，环境记录器是声明式环境记录器。
对象环境记录器：用来定义出现在全局上下文中的变量和函数的关系。在全局环境中，环境记录器是对象环境记录器。

注：对于函数环境，声明式环境记录器还包含了一个传递给函数的 arguments 对象（此对象存储索引和参数的映射）和传递给函数的参数的 length。

用伪代码表示执行上下文和词法环境的关系

GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
    }
    outer: <Global or outer function environment reference>
  }
}

关于变量环境

它同样是一个词法环境，其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。

如上所述，变量环境也是一个词法环境，所以它有着上面定义的词法环境的所有属性。

在 ES6 中，词法环境组件和变量环境组件的一个不同就是前者被用来存储函数声明和变量（let 和 const）绑定，而后者只用来存储 var 变量绑定。

举个栗子：

let a = 20;
const b = 30;
var c;

function multiply(e, f) {
 var g = 20;
 return e * f * g;
}

c = multiply(20, 30);

对应执行上下文伪代码：

GlobalExectionContext = {

  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>
  },

  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>
  },

VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>
  }
}