javascript执行上下文详解

2023年6月10日下午10:14 • JavaScript

JavaScript 执行上下文详解

JavaScript（以下简称 JS）是一种运行在浏览器中的编程语言，它常常被用来实现交互性和动画效果。理解 JavaScript 的执行上下文对于掌握 JS 编程至关重要，这篇文章将为你详细讲解 JS 执行上下文的工作原理及其相关的知识点。

JS 执行上下文

JS 执行上下文是在代码执行时，JavaScript 引擎所创建的一个内部数据结构，用于存储关于代码执行的所有信息。每当一个新的执行上下文被创建时，JS 引擎会对当前上下文进行压栈，即将其推到调用栈顶部。

每个执行上下文由三个关键要素组成：

变量环境（Variable Environment）- 存储在当前执行上下文中声明的变量，同时也包含了函数声明等信息；
词法环境（Lexical Environment）- 保存了当前执行上下文中声明的所有符号（标识符）和它们对应的值（变量、函数）的映射。在函数的执行上下文中，它还记录了函数声明时的词法环境；
this 值（This Binding） - 在执行上下文的创建阶段，JS 引擎会确定 this 的值，并将其绑定到执行上下文中。

在 JavaScript 中，有三种类型的执行上下文：

当一个新的执行上下文被创建时，它将经历两个阶段的过程：创建阶段和执行阶段。

变量对象的创建：变量对象（Variable Object）是一个关键的元素，用于在代码执行前存储变量、函数定义等信息。针对全局执行上下文，它是全局变量对象，包含了全局变量、函数，以及用let和const定义的变量。针对函数执行上下文，它是活动对象（Active Object），除了包含函数的参数和局部变量，还包含函数声明和变量声明。
词法环境的创建：词法环境是一种规范类型，用于管理符号和变量之间的关系，它会在代码执行之前被创建，并在执行期间维护。对于全局执行上下文，词法环境通常与全局变量对象相同；针对函数执行上下文，它会创建一个函数环境，其中包括当前执行上下文内声明的变量和函数。
绑定 this 值：在创建阶段，JS 引擎还会确定 this 的值，并将其绑定到执行上下文中。

当执行上下文创建完成后，JS 引擎会开始执行代码。JS代码可以定义变量、函数、逻辑判断和控制流，这些操作都会在执行阶段内完成。

接下来，我们通过几个示例的说明来加深对执行上下文的理解。

var x = 'hello ';
console.log(x + y + z);
var y = 'world';

执行上下文的创建过程如下：

function foo() {
  var x = 'foo';
  function bar() {
    var y = 'bar';
  }
  bar();
}
foo();

执行上下文的创建过程如下：

学习 JavaScript 的执行上下文是理解 JavaScript 引擎如何执行代码的关键所在。通过了解它的生命周期、结构和类型，我们可以更好地编写 JavaScript 代码，并避免一些常见的错误。希望本文对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript执行上下文详解 - Python技术站