你不知道的JavaScript底层逻辑(2)

睡个好jo
2,285 阅读9分钟

大家好，我是睡个好jo。这篇文章是继续上一期的分享，那么这期主要分享的是JS中的预编译和栈的一些相关知识。

想要掌握本期的学习，需先掌握上一篇文章的知识 你不知道的JavaScript底层逻辑(1) 让我们从预编译开始本次学习！

JS中的预编译

认识预编译前首先需要知道声明提升这个概念：

  1. 变量声明，声明提升： 在JavaScript中，变量声明（使用var、let、const关键字）会被提升到当前作用域的顶部。但其初始化（赋值）部分仍然保留在原地。 例如：
    console.log(a)
    var a = 10;

这串代码能够正常运行，它将等价于

    var a;
    console.log(a)
    a = 10

详解请看第一篇

  1. 函数声明，整体提升： 函数声明（使用function关键字）同样会被提升，但不同于变量声明，整个函数体也会被提升，而不仅仅是函数声明。 例如：
    console.log(greet()); // 输出 "Hello, world!" 
    function greet() {
        return "Hello, world!";
    }

尽管greet函数在调用之前声明，但由于函数声明的整体提升，这段代码能够正常运行。

注意事项

  • 函数表达式不会被提升，只有函数声明会被提升。例如，var greet = function() {...};不会被提升。
  • 块级作用域：let和const引入了块级作用域，这改变了变量声明的作用域规则，使得它们在声明它们的块之外不可见。

函数中的预编译

首先我们需要了解预编译的四个步骤

  1. 创建函数的执行上下文对象 (AO / Lexical Environment) 每当一个函数被调用时，JavaScript引擎首先会为其创建一个新的执行上下文（Execution Context）。对于函数而言，这个上下文特别被称为活动对象（Activation Object, AO） 或在ES6标准中更准确地称为词法环境（Lexical Environment）。这个环境保存了函数执行时的所有局部变量、参数、以及对外部作用域的引用等信息。

  2. 找形参和变量声明，将形参和变量名作为AO的属性，值为undefined 接下来，函数的形参（形式参数）和在其内部声明的变量会被收集并加入到AO中。在实际的值被赋给它们之前，这些变量和形参都被初始化为undefined。这意味着在函数体内的任何代码执行之前，所有声明的变量都已经存在，但还没有具体的值。

  3. 将实参和形参统一 当函数被调用时，传入的实参（实际参数）会与之前声明的形参相匹配并赋值。这个过程发生在预编译阶段之后，实参的值会覆盖AO中形参的默认undefined值。通过这种方式，函数内部就可以使用这些传入的值进行计算和操作。

  4. 在函数体内找函数声明，将函数名作为AO的属性名，值赋予函数体 最后，函数体内部的函数声明也会被处理。任何在函数内部声明的函数会被提升到AO中，并将其函数体赋值给相应的属性名。这意味着内部函数可以在函数体的任何地方被访问和调用，即使声明在调用点之后。这一点与变量声明类似，但要注意的是，函数声明会覆盖掉同名的变量声明（如果有的话）。

实战 利用上面的步骤分析如下代码

    function fn(a) {
        console.log(a); // [Function: a]
        var a = 123
        console.log(a); // 123  
        function a() {}
        console.log(a); // 123
        var b = function () {}
        console.log(b); // [Function: b]    
        function d() {}
        var d = a
        console.log(d); // 123
   }
   fn(1)

可以先自行思考，详解如下

  1. 创建函数的执行上下文对象 (AO): 初始化AO，为函数fn创建一个新的词法环境。

  2. 找形参和变量声明: 将形参a加入AO，值为undefined。发现变量声明var a，加入AO，值为undefined（注意这里先于形参声明，但不影响最终结果，因为形参的赋值会覆盖这个undefined）。发现变量声明var b，加入AO，值为undefined。发现函数声明function d() {}，加入AO，值为undefind。 此时 AO 大致如下：

    AO : {
        a: undefined, 
        b: undefined,
        d: undefined
    }
  1. 将实参和形参统一: 实参1与形参a绑定，此时AO中的a值为1。 此时 AO 大致如下：
    AO : {
        a: 1, 
        b: undefined,
        d: undefined
    }
  1. 处理函数体内的函数声明: 处理函数声明function a() {}，由于函数声明优先级高于变量声明，此处将a视为函数定义，值为函数体。处理var b = function () {}，但由于之前已经声明了b，这里相当于赋值操作，b变为一个新函数。 函数声明function d() {}，值变为 function d(){} 此时 AO 大致如下：
    AO : {
        a: function a(){}, 
        b: undefined,
        d: function d(){}
    }
  1. 最后，执行函数fn里的代码：

  • console.log(a); // [Function: a]

    • 打印出a，由于函数声明优先，此时a是函数。

  • var a = 123

    • 变量a被赋予新值123，覆盖了函数声明。

  • console.log(a); // 123

    • 打印出a，现在值为123。

  • console.log(a); // 123

    • 再次打印a，依然是123，因为之前的赋值操作已经改变了a的值。

  • var b = function () {}

    • b被赋予一个新的函数表达式，覆盖了之前的函数声明。

  • console.log(b); // [Function: b]

    • 打印出b，现在是一个函数表达式的值。

  • function d() {}

    • 此处的d函数声明被忽略，因为前面已有同名的变量声明。

  • var d = a

    • d被赋予a的值，即123。

  • console.log(d); // 123

    • 打印出d，值为123，因为d被赋值为a的值。

结果如图所示 image.png

到这函数的预编译就结束了。

请大家分析下面的例子：

    function fn(a, b) {
        console.log(a);
        c = 0
        var c;
        a = 3
        b = 2
        console.log(b);
        function b() {}
        console.log(b);
    }
    fn(1)

答案放在结尾了

全局预编译

  1. 创建全局执行上下文对象 (Global Object, GO) 当JavaScript环境初始化时，无论是浏览器环境下的window对象（浏览器全局对象）还是Node.js环境下的global对象（Node.js全局对象），都会创建一个全局执行上下文。

  2. 找变量声明，变量名作为GO的属性名，值为undefined 在全局范围内，任何使用var、let、const或function声明的变量（函数也是一种特殊类型的变量）都会被识别并处理。在这个阶段，变量名会作为全局执行上下文对象的属性添加，但其值初始化为undefined。这意味着在变量真正被赋值之前，尝试访问它们会得到undefined。

  3. 在全局找函数声明，函数名为GO的属性名，值为函数体 对于使用function关键字声明的函数，其名称和函数体也会在预编译阶段被加入到全局执行上下文中。与变量类似，函数名成为上下文的一个属性，但其值是函数的定义（函数体），而不是undefined。这允许在函数声明之前调用函数。

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

分析例子：

    var num = 10
    function foo(){
        console.log(num)
    }
    foo()
  1. 创建GO
GO:{}
  1. 找变量声明 变量num通过var声明并在全局上下文中被提升，其初始值为undefined。
GO:{
    num : undefined
}
  1. 找函数声明,foo(){}
GO:{
  num:undefined
  foo: function foo(){}
}
  1. 执行全局
GO:{
   num:100
   foo:function foo(){}
}

执行foo（）创建AO 最后输出num=100

js中的调用栈

JavaScript 作为一种编程语言，确实没有直接内建名为“栈”的数据结构，常使用数组（Array）来模拟栈的行为，push和pop方法分别对应于栈的入栈和出栈操作。

调用栈是JavaScript执行环境中用于跟踪函数调用顺序的数据结构。当一个函数被调用时，JavaScript引擎会为该函数创建一个新的执行上下文（Execution Context），并将这个上下文压入调用栈的顶部。执行上下文包含了函数执行时的所有必要信息，如局部变量、参数、this的值和作用域链等。

调用栈的工作原理：

  1. 入栈（Push）: 当一个函数被调用时，会创建一个新的执行上下文，并将此上下文压入调用栈顶。这个上下文包含了函数执行所需的所有信息，比如局部变量、参数、this的值以及指向外部作用域的引用等。

  2. 执行: 栈顶的函数开始执行。在执行过程中，如果遇到嵌套调用其他函数，这个过程会重复，新函数的执行上下文会被再次压入栈顶。

  3. 出栈（Pop）: 当一个函数执行完毕并返回结果后，其执行上下文会从调用栈中弹出（pop），控制权回到调用它的函数继续执行。这个过程一直持续，直到最初的函数执行完毕，栈变空，程序结束。

我们来举一个例子来让我们了解调用栈：

    var a = 2
    function add(){
        var b = 10
        return a + b    
    }
    add()
  1. 全局执行上下文: 首先，程序开始执行时，会创建一个全局执行上下文，并压入调用栈。在这个上下文中，变量a被声明并初始化为2，函数add也被声明。

image.png

  1. add函数执行上下文: 当调用add()时，一个新的执行上下文被创建并压入调用栈顶。在这个上下文中，变量b被声明并初始化为4，同时可以访问外部上下文中的变量a。

image.png 3. 返回与栈弹出: add函数执行完毕后，其执行上下文从调用栈中弹出，控制权返回到全局执行上下文。 全局上下文继续执行。

答案：

  1. 预编译阶段 创建函数的执行上下文对象 (AO): 为函数fn创建一个新的词法环境。

  2. 找形参和变量声明: 形参a和b加入AO，值为undefined。 变量声明var c;加入AO，值为undefined。

  3. 实参和形参统一: 实参1与形参a绑定，a的值变为1。 由于没有传入第二个参数，b保持undefined。

  4. 函数声明: function b() {}声明，由于在变量b之后，这里会被忽略。

执行阶段

  • console.log(a); 输出 1，因为a已被实参1赋值。
  • c = 0; 直接赋值操作，实际执行时覆盖AO中的c为0`。
  • var c; 此时已无关紧要，因为c已有值。
  • a = 3; 变量a被赋予新值3。
  • b = 2; 变量b被赋予值2，覆盖之前的undefined。
  • console.log(b); 输出 2，因为b的值为2。
  • function b() {}; 由于在执行阶段，不会重复声明，此处逻辑描述有误，实际应忽略。
  • console.log(b); 依旧输出 2，因为变量b为2，函数声明不会影响变量b的值。

那么本此的分享到这就结束了

avatar
文章
阅读
粉丝