JS 中的“秘书”——预编译详解

莞莞类卿
372 阅读5分钟

JavaScript 预编译与执行机制解析

在深入探讨JavaScript预编译与执行机制之前，我们首先需要明确几个基本概念：声明提升、函数执行上下文、全局执行上下文以及调用栈。这些概念共同构成了JavaScript运行时环境的核心组成部分，对于理解代码的执行流程至关重要。本文将围绕这些核心概念，展开一次深度解析之旅,全面而深入地阐述这一主题。

image.png

一、声明提升（Hoisting）

声明提升是JavaScript中一个独特的特性，它涉及到变量声明和函数声明在代码执行前被提前处理的过程。这一特性有时会引发一些令人困惑的行为，尤其是对初学者而言，但深入理解其机制是掌握JavaScript语言的关键之一。

1. 变量声明提升

当JavaScript引擎开始执行一段脚本或函数时，它首先会进行编译阶段，在这个阶段，所有使用var声明的变量会被提升至当前作用域的顶部。这意味着尽管你在代码中可能将变量声明放在了函数体的下半部分，实际上该变量在整个函数作用域内都是可用的，尽管其初始值为undefined。

console.log(a); // undefined
var a = 5

在上述代码中，尽管变量a的赋值操作发生在console.log之后，但由于声明提升，a在输出时已经被声明了，只是其值为undefined。

image.png 结果与下述代码一致

var a
console.log(a); // undefined
var a = 5

image.png

2. 函数声明提升

与变量声明类似，使用函数声明语法定义的函数也会被提升至所在作用域的顶部。这意味着你可以在函数声明之前调用函数，而不会遇到引用错误。

foo(); // 输出 "Hello, World!"
function foo() {
    console.log("Hello, World!");
}

image.png

二、函数执行上下文与全局执行上下文

在JavaScript中，每当一个函数被调用时，都会创建一个新的执行上下文（Execution Context）。执行上下文负责存储函数执行过程中的变量、函数参数以及作用域链等信息，它是JavaScript执行环境的具体体现。

1. 函数执行上下文（AO）

当一个函数被调用时，会执行以下步骤来创建其执行上下文（通常称为活动对象AO, Activation Object）：

  • 创建AO：为函数创建一个新的执行上下文对象AO。
  • 参数和变量声明：找形参和变量声明，将形参和变量名作为AO的属性，值为underfined初始值设为undefined。
  • 实参与形参绑定：将实参和形参统一。
  • 函数声明：在函数体内找函数声明，将函数名作为AO的属性名，值赋予函数体。

例子：

function fn(a){
    console.log(a);     //function a(){}
    var a = 123
    console.log(a);     // a:123
    function a(){}  //函数声明
    console.log(a);     
    var b =function (){}  //函数表达式
    console.log(b); //function b(){}
    function d(){}
    var d=a        // d:123
    console.log(d); //123
}
fn(1)

执行上下文AO：

image.png 代码实际输出结果：

image.png

2. 全局执行上下文（GO）

全局执行上下文是在程序启动时创建的第一个执行上下文，它代表了整个JavaScript程序的执行环境。其创建过程包括：

  • 创建GO：创建全局执行上下文对象 GO。
  • 变量声明：在全局找变量声明，变量名作为GO的属性名，初始值为undefined。
  • 函数声明：在全局找函数声明，函数名作为GO的属性名，值为函数体。

例子：

var global = 100
function fn(){
    console.log(global);
}
fn()

执行上下文GO：

image.png

代码实际输出结果：

image.png

3. 全局执行上下文（GO）和 函数执行上下文（AO）

当程序运行时，先进行全局变量的预编译，在函数调用的前一刻进行函数声明，进入函数预编译。

例子：

global = 100

function fn(){
    console.log(global);    //undefined
    global = 200
    console.log(global);  //200
    global=300
    
}

fn();
console.log(global);  
var global;

全局执行上下文GO和函数执行上下文AO：

image.png

代码实际输出结果：

image.png

三、调用栈（Call Stack）

调用栈是JavaScript引擎用于追踪函数调用顺序的一种数据结构，它记录了每一次函数调用的状态，包括函数的返回地址和局部变量等信息。每当一个函数被调用时，其执行上下文会被推入调用栈；当函数执行完毕，其上下文则从栈顶弹出，控制权返回到调用它的函数或全局作用域。

调用栈的工作机制确保了函数的执行顺序遵循“先进后出”原则，同时也限制了JavaScript的并发能力，因为任何时刻只能有一个执行上下文处于活动状态，这解释了为什么JavaScript被称为单线程语言。

四、结论

JavaScript的预编译与执行机制，特别是声明提升、执行上下文以及调用栈的概念，对于编写高效、可维护的代码至关重要。理解这些机制不仅能够帮助开发者避免常见的陷阱，还能在面对复杂逻辑时，更加游刃有余地进行调试和优化。通过深入探索这些底层原理，我们能更深刻地认识到JavaScript作为一种动态类型、解释执行语言的独特魅力。

avatar
文章
阅读
粉丝