JavaScript预编译

最新推荐文章于 2026-06-20 22:27:38 发布

原创最新推荐文章于 2026-06-20 22:27:38 发布 · 156 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端

JS是解释性语言，存在预编译阶段，导致变量提升和函数提升现象。预编译包括词法分析和创建全局对象(GO)与活动对象(AO)。未声明的变量会被认为是全局变量。在函数执行中，AO会处理形参、var变量和函数声明。匿名函数和函数表达式不参与预编译。文章通过示例详细解析了预编译过程和作用域的影响。

JS预编译

参考自：点击跳转bilibili 讲的得很清楚

JS属于解释性语言，在执行过程中顺序执行，但是会分块先预编译再执行。因此JS存在一种变量提升的现象。

但是是因为有预编译才有所谓的变量提升

变量提升

var 声明变量提升、function声明函数提升

无论这两者声明或调用的位置是前是后，系统总是会将其提升到调用前面，因此只值为undefined

#### JS代码运行的三大步骤

词法分析
预编译
解释执行

暗示全局变量 imply global

任何变量，未经声明就赋值，此变量为全局所有

<script>
	a = 100
  console.log(a, window.a)) //100 100
 
  function test(){
    b = 200
  }
  test()
  console.log(b, window.b) //200 200
</script>

、、、、、在ES5下、、、、、

Global Object 和 Activition Object

所谓的全局作用域，局部作用域

创建GO对象
寻找var变量声明，值设定为undefined
寻找函数声明，将函数名作为GO属性名，值为函数体

创建AO对象
寻找函数的形参和var变量声明，将变量和形参名作为AO key，value为undefined
统一形参和实参，即更改形参后的undefined为实参值
寻找函数声明，将函数作为AO key，value为函数体

匿名函数、函数表达式不参与预编译

例：来自https://blog.csdn.net/weixin_44909683/article/details/106093191

a = 100;
function test(e){
    function e() {}
    arguments[0] = 2;
    console.log(e); //2
    console.log(c); // undefined
    if(a){
        var b = 123;
        function c() {} //在if语句里面不声明 
    }
    var c;
    var a;
    a = arguments[1];
    console.log(a); //2
    console.log(b); //undefined
    f = 456;
    console.log(c); //undefined
    console.log(f); //456
}
var a;
test(1,2);
console.log(a);//100
console.log(f); //456

预编译

AO：{

e:~~undefined~~ 1 fn(e)

b: undefined

c: undefined

a:undefined

}

GO:{

a: undefined

test: fn

}

执行

AO：{

e:~~undefined~~ 1 ~~fn(e)~~ 2

b: undefined

c: undefined

a:~~undefined~~ 2

}

GO:{

a: ~~undefined~~ 100

test: fn

}