JS预编译

最新推荐文章于 2025-05-29 11:38:29 发布

My_Java_Life

最新推荐文章于 2025-05-29 11:38:29 发布

阅读量394

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/My_Java_Life/article/details/121845851

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中的预编译过程，包括函数预编译和全局变量预编译。通过实例解析了函数执行的步骤，如形参赋值、变量声明和函数体的挂载。同时，讨论了全局变量如何挂载到全局对象（GO）并在执行时生成激活对象（AO）。最后，展示了全局变量和局部变量在预编译和执行阶段的值变化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS预编译

通篇检查语法错误
预编译
开始解释一行，执行一行

函数的预编译

 function test(a) {
   console.log(a);
   var a = 1;
   console.log(a);
   function a() {}
   console.log(a)
   var b = function(){}
   console.log(b);
   function d() {}
 }
 test(2);

打印结果
在这里插入图片描述

函数执行步骤

在函数执行前的一瞬间会生成自己的AO，（Activation Object，活跃对象也叫函数上下文，如果函数执行2次，生成了两次AO，这两次的AO是没有任何关联），变量都会挂载到AO中，具体步骤如下

寻找形参和变量声明
实参值赋值给形参
寻找函数声明并赋值函数体
从函数体第一行开始逐行执行

结合本例讲解

寻找形参和变量声明

AO={
  a:undefined,// 形参
  b:undefined,// 变量声明
}

实参值赋值给形参

AO={
  a:undefined -> 2,// 实参值2赋值给形参a
  b:undefined,
}

寻找函数声明并赋值函数体

AO={
  a:undefined -> 2 -> function a() {},// 寻找函数声明并赋值函数体
  b:undefined,
  d:function d() {} //寻找函数声明并赋值函数体
}

从函数体第一行开始逐行执行

 function test(a) {
   console.log(a); // function a() {}
   var a = 1; // 将1赋值给a，a:undefined -> 2 -> function a() {} -> 1
   console.log(a); // 1
   function a() {} // 第3步已预编译，执行时此行无影响
   console.log(a) // 1
   var b = function(){} // 将function(){}赋值给b，即b:undefined -> function(){}
   console.log(b); // function(){}
   function d() {} // 第3步已预编译，执行时此行无影响
 }

从预编译到执行结束，值的全部变化过程：

AO={
  a:undefined -> 2 -> function a() {} -> 1,
  b:undefined -> function(){},
  d:function d() {} 
}

加上全局变量的预编译

  var b = 3;
  console.log(a);

  function a(a) {
    console.log(a);
    var a = 2;
    console.log(a);
    function a() {}
    var b = 5;
    console.log(b)
  }
  a(1);

预编译时，全局变量挂载到GO（Global Object，即全局对象）上

寻找变量
寻找函数声明
执行

结合本例讲解

1. 寻找变量

  GO = {
    b:undefined
  };

2. 寻找函数声明

  GO = {
    b:undefined，
    a: function a(a) {
	    console.log(a);
	    var a = 2;
	    console.log(a);
	    function a() {}
	    var b = 5;
	    console.log(b)
	  }
  };

3. 执行
当执行到a(1);时，开始生成AO

  GO = {
    b:undefined,->3
    a: function a(a) {
	    console.log(a);
	    var a = 2;
	    console.log(a);
	    function a() {}
	    var b = 5;
	    console.log(b)
	  }
  };
  AO = {
    a:undefined,->1->function a() {},
    b:undefined
  }

结束预编译