"JavaScript执行引擎深度解析：预编译法则与高效代码构建揭秘"

不碎觉也不行呀
165 阅读5分钟

在JavaScript的执行模型中，理解声明提升、预编译规则、以及调用栈的概念是剖析代码行为和变量作用域的核心。这一机制设计精妙，确保了代码的高效执行与逻辑清晰。

声明提升作为JavaScript引擎的预处理步骤，将函数和变量声明移至当前作用域顶部。值得注意的是，函数声明会连同定义一起提升，而变量声明仅提升声明部分，初始值默认为undefined。这种机制允许在声明之前使用变量和函数，但要求开发者谨慎处理，以防未初始化变量的误用。

预编译过程进一步细化了执行环境的初始化。在函数执行前，会创建一个执行上下文对象（ECO），它负责存储函数的局部变量、参数和内部函数。这一阶段，形参与局部变量声明被赋予undefined值，随后形参与实参匹配，最后函数内部的声明被处理，其中函数声明覆盖之前可能存在的同名变量声明，体现了函数声明的优先级。

在全局作用域，预编译遵循类似逻辑，但应用在全局执行上下文中。变量和函数声明被提升至全局对象，影响着整个脚本的可访问性。

调用栈作为控制函数调用序列的机制，对于理解执行流程至关重要。每调用一个函数，即在调用栈顶添加一个栈帧，记录函数的执行上下文。函数执行完毕，其栈帧被移除，让调用栈回归到调用前状态。这一动态结构清晰展现了函数间的嵌套和返回路径，对于调试和理解递归尤为关键。

综上所述，声明提升、预编译规则、全局上下文初始化及调用栈构成了JavaScript执行机制的骨架，它们相互作用，确保了代码的有序执行和变量作用域的准确界定。掌握这些原理，开发者能够编写出更高效、可读性强且易于维护的代码，同时也能更有效地诊断和解决运行时问题。

通过下面三段代码你可以更加清晰的了解预编译：

第一段代码

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

fn();
var global;//输出的结果是undefined 200

解释：

  1. 全局预编译：在代码执行前，首先进行全局上下文的预编译。这里，var global;声明（虽然放在函数调用之后，但由于声明提升，它实际上被提升至作用域顶部）使得global变量被声明，但其值为undefined。同时，function fn(){...}也被提升，整个函数体被存储，但不会执行。

  2. 函数fn的预编译：当调用fn()时，创建函数执行上下文。在这个上下文中，var global = 300;的声明被提升，此时global在AO中被声明，值为undefined，但实际赋值操作还在后面。

  3. 函数执行：

    • 第一次console.log(global);输出undefined，因为虽然全局有一个global = 100，但在函数内部，由于存在自己的局部变量声明var global;（已被提升），所以访问的是局部的global，其值为undefined。
    • 接下来global = 200;实际上修改的是局部的global，但由于局部global的声明提升，此时它的值被覆盖为200。
    • 第二次console.log(global);输出200，因为现在局部的global已经被赋值为200。
    • var global = 300;最终将局部的global赋值为300，但这发生在之前的输出之后，所以不影响前面的输出。

最终，这段代码的输出是undefined和200。

第二段代码

Javascript
let global = 100;

function fn(){
  console.log(global);
}
fn();// 输出的结果是100

解释：

  1. 全局预编译：这里使用let声明了全局变量global，与var不同，let和const声明的变量不会被提升到作用域顶部赋值为undefined，而是进入所谓的“暂时性死区”（Temporal Dead Zone, TDZ），直到声明被执行才真正可用。
  2. 函数fn的预编译：函数内部没有自己的global声明，因此在函数执行时，它试图访问全局的global。
  3. 函数执行：console.log(global);输出100，因为它访问的是全局作用域中由let global = 100;声明并初始化的global变量。

最终，这段代码的输出是100。

第三段代码

var a = 2
function  add(b ,c) {
    return b + c
}
function addAll(b,c) {
    var d = 10
    var result = add(b,c)
    return a + result + d
}
addAll(3,6)
console.log(addAll(3,6))//输出的结果是21

这段代码定义了两个函数add和addAll，以及一个全局变量a，然后调用了addAll函数两次，并在最后一次调用后打印了返回的结果。下面是详细的步骤解释：

  1. 全局变量声明与赋值:

    Javascript
1var a = 2;

    这里声明了一个全局变量a并赋值为2。

  2. 函数定义:

    Javascript
function add(b, c) {
    return b + c;
}

    定义了一个名为add的函数，它接受两个参数b和c，并返回它们的和。

  3. 函数定义:

    Javascript
解释
function addAll(b, c) {
    var d = 10;
    var result = add(b, c);
    return a + result + d;
}

    定义了一个名为addAll的函数，它也接受两个参数b和c。在函数内部：

    • 首先声明并初始化局部变量d为10。
    • 然后调用add函数，将b和c作为参数传入，并将返回值保存在局部变量result中。
    • 最后返回a + result + d的值，即全局变量a的值加上add函数的返回值和局部变量d的和。

  4. 函数调用:

    Javascript
addAll(3, 6);

    这里第一次调用了addAll函数，传入3和6作为参数。计算过程如下：

    • b = 3, c = 6
    • d = 10
    • result = add(3, 6) = 3 + 6 = 9
    • return a + result + d = 2 + 9 + 10 = 21 但是这次调用的结果没有被存储或打印出来，所以直观上看不到输出。

  5. 第二次调用与打印结果:

    Javascript
1console.log(addAll(3, 6));

    第二次调用addAll(3, 6)，这一次调用与第一次相同，计算结果同样是21，但这次调用的结果通过console.log打印了出来。

因此，console.log(addAll(3,6))会输出21。

avatar
文章
阅读
粉丝