深入解析JavaScript执行机制：编译与执行阶段全揭秘

引言

JavaScript 是一门强大的编程语言，广泛应用于前端和后端开发。理解其执行机制和作用域规则是编写高效、可靠代码的关键。本文将深入探讨 JavaScript 的执行机制，包括编译阶段和执行阶段的角色，变量的作用域以及查找规则，并通过具体的例子详细解释这些概念。

https://www.zuocode.com

一、JavaScript 的执行机制

JavaScript 的执行机制可以分为两个主要阶段：编译阶段和执行阶段。这两个阶段共同协作，确保代码能够正确运行并达到预期效果。（顺序是先编译后执行）

1. 编译阶段

在编译阶段，JavaScript 引擎会进行以下操作：

词法分析：将源代码分解为一系列的标记（tokens），如关键字、标识符、运算符等。

语法分析：检查代码的语法是否正确，并生成抽象语法树（AST）。

作用域分析：确定每个变量的作用域，并创建相应的词法环境（Lexical Environment）。在此阶段，所有的 var 和 function 声明会被提升到其所在作用域的顶部（即所谓的“变量提升”）。

注释：### 词法环境的组成部分

一个词法环境由以下几个部分组成：

环境记录（Environment Record）：存储当前作用域中的变量、函数声明和参数。

外部环境引用（Outer Reference）：指向外部（父级）词法环境的引用，形成了作用域链。

示例：

var a = 1;

在编译阶段，这段代码会被拆解为两部分：

var a;：声明部分被提升到作用域的顶部。

a = 1;：赋值部分保留在原地，在执行阶段执行。

2. 执行阶段

在执行阶段，JavaScript 引擎会：

初始化变量：根据编译阶段生成的作用域信息，对变量进行初始化。

逐行执行代码：按照顺序执行每一条语句，包括函数调用、表达式求值等。

变量查找：当需要访问某个变量时，JavaScript 引擎会在当前作用域及其外部作用域中查找该变量的定义。

示例：

console.log(a); // undefined (变量提升，但未初始化)
var a = 10;
console.log(a); // 10 (已经初始化)

编译器中的代码为

var a

console.log(a);

a = 10;

console.log(a);

在执行阶段，第一次 console.log(a) 输出 undefined，因为 a 已经声明但尚未初始化。第二次 console.log(a) 输出 10，因为此时 a 已经被赋值。

二、变量与作用域

1. 变量的作用域

变量不会单独存在，它们属于一个作用域。作用域是变量的查找规则，决定了在当前作用域中找不到变量时如何向上级作用域查找。

作用域类型：

全局作用域：在整个程序范围内都可访问的变量。

函数作用域：仅在函数内部可见的变量。

块级作用域：使用 let 和 const 声明的变量具有块级作用域，仅在 {} 内部可见。

示例：

function outer() {
    var x = 'outer';
    function inner() {
        console.log(x); // 查找 x
    }
    inner();
}

outer(); // 输出: outer

在这个例子中，inner 函数尝试访问 x。由于 x 不在 inner 的局部作用域中，JavaScript 引擎会沿着作用域链向上查找，直到在 outer 的作用域中找到 x。

2. 作用域链

当在一个嵌套作用域中访问变量时，JavaScript 引擎会沿着作用域链从当前作用域向外查找，直到找到目标变量或到达全局作用域为止。这个查找过程只能在执行阶段进行。

示例：

var globalVar = 'global';

function outer() {
    var outerVar = 'outer';

    function inner() {
        var innerVar = 'inner';
        console.log(innerVar); // inner
        console.log(outerVar); // outer
        console.log(globalVar); // global
    }

    inner();
}

outer();

在这个例子中，inner 函数依次查找 innerVar、outerVar 和 globalVar，沿着作用域链从内层作用域向外层作用域查找。

三、LHS 和 RHS 查找

在 JavaScript 中，变量查找可以分为两种类型：LHS（Left-Hand Side）查找和RHS（Right-Hand Side）查找。

1. LHS 查找

LHS 查找是指在赋值操作中找到一个目标位置来存储某个值。它发生在等号左边的变量上。

示例：

a = 2; // LHS 查找 'a'

2. RHS 查找

RHS 查找是指在需要获取某个变量或表达式的值来进行计算或其他操作时进行的查找。它发生在等号右边的变量或表达式上。

示例：

console.log(a); // RHS 查找 'a'

3. 混合示例

function foo(a) {
    console.log(a + b); // RHS 查找 'a' 和 'b'
    b = a;              // LHS 查找 'b'，RHS 查找 'a'
}

foo(2);

在这个例子中：

console.log(a + b); 需要进行两次 RHS 查找：一次查找 a，一次查找 b。

b = a; 需要进行一次 LHS 查找 b 和一次 RHS 查找 a。

四、内存中的变量存储

变量存储在内存中，具体来说是存储在栈（Stack）和堆（Heap）中。

栈：用于存储基本数据类型的值，如数字、字符串、布尔值等。

堆：用于存储引用数据类型的值，如对象、数组等。

示例：

var num = 10; // 存储在栈中
var obj = { name: 'Alice' }; // 存储在堆中，栈中存储的是指向堆中对象的引用

五、作用域嵌套与作用域链

当存在多个嵌套的作用域时，JavaScript 引擎会沿着作用域链从当前作用域向外查找，直到找到目标变量或到达全局作用域为止。

示例：

var globalVar = 'global';

function outer() {
    var outerVar = 'outer';

    function inner() {
        var innerVar = 'inner';
        console.log(innerVar); // inner
        console.log(outerVar); // outer
        console.log(globalVar); // global
    }

    inner();
}

outer();

在这个例子中，inner 函数依次查找 innerVar、outerVar 和 globalVar，沿着作用域链从内层作用域向外层作用域查找。

六、总结

通过深入理解 JavaScript 的执行机制、变量的作用域以及 LHS 和 RHS 查找的概念，我们可以更好地掌握这门语言的工作原理。以下是本文的主要内容总结：

编译阶段：负责语法分析、词法分析、生成 AST 和作用域分析。

执行阶段：负责初始化变量、逐行执行代码，并在需要时沿作用域链查找变量的实际值。

LHS 和 RHS 查找：分别用于赋值操作和获取变量值的操作。

作用域嵌套与作用域链：确保在复杂的嵌套作用域中正确解析变量。

理解这些概念不仅有助于编写更高效和无误的 JavaScript 代码，还能帮助我们更好地调试和优化现有代码。希望本文能为你提供有价值的参考和指导。

作者：爱喝羊奶

链接：https://juejin.cn

+友情链接