JavaScript预编译过程是什么

2024-04-02 19:04:59 496人浏览薄情痞子

摘要

本篇内容介绍了“javascript预编译过程是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！阶段(三

本篇内容介绍了“javascript预编译过程是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

JavaScript预编译过程是什么

阶段(三个)

词法语法分析：词法语法分析就是检查JavaScript代码是否有一些低级的语法错误
预编译：本文主讲
执行代码：执行代码就是js引擎解析代码，解析一行执行一行

这章主要讲预编译过程

预编译过程

预编译也分为2个时间点：

第一个是在JavaScript代码执行之前
第二个是在函数执行之前。

但是JavaScript代码之前，之前的预编译只发生一次，函数执行之前的预编译是多次的。

1. JavaScript代码执行之前的预编译

JavaScript代码执行之前，首先会创建一个全局对象，可以理解为window对象，也可以理解为GO（Global Object）对象，我们是看不到的(无法打印)
然后将所有声明的全局变量、未使用var和let声明的变量放到Go对象中，并且赋值为undefined(联想到“变量提升”)
分析**函数声明：**然后再将所有的函数声明也放到GO对象中，并且赋值为函数自身的函数体(函数名为属性名,值为函数体，如果函数名和变量名相同，则无情覆盖)

案例说明

<script>
    var a = 1;
    console.log(a);
    console.log(b);
    var b = 10;
    function fun (a) {
        console.log(b);
        var a = b = 2;
        var c = 123;
        console.log(a);
        console.log(b);
    }
    var a2 = 20
    fun(1);
 
</script>

结合上面说的步骤：

首先，<script></script>中的代码执行之前会创建一个GO对象(window对象)
```
GO = {
	//自带的属性都不写
}
```
将所有声明的全局变量、未使用var和let声明的变量放到GO对象中，并且赋值为undefined
```
GO = {
	a : undefined,
	b : undefined,
	a2 : undefined
}
```

分析函数声明，函数名为属性名,值为函数体，如果函数名和变量名相同，则无情覆盖

GO = {
	a : undefined,
	b : undefined,
	a2 : undefined,
	function fun (a) {
    var a = b = 2;
    var c = 123;
  }
}

此时完成了js代码执行之前的预编译过程，开始执行js代码，首先是给a进行赋值为1，在GO对象里边也会进行对应的改变：
```
GO = {
	a : 1,
	b : undefined,
	a2 : undefined,
	function fun (a) {
    var a = b = 2;
    var c = 123;
  }
}
```
然后打印a，此时会在GO对象上去找变量a，然后此时的a的值为1，所以console.log(a) 是等于1的。接着打印b，也会去GO对象上找，找到了b的值为undefined，所以console.log(b)是等于undefined。

接着执行到赋值语句：b = 10; 此时GO对象里b的值变成了10

GO = {
	a : 1,
	b : 10,
	a2 : undefined,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}

接着下一行代码是一个**fun函数，此时不会去执行该函数**，因为在前面的预编译过程中实际上是被放到了代码的最前端，就是传说中的声明提前，所以忽略掉了。接着给a2进行赋值操作：a2 = 20，GO对象也发生变化：
```
GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}
```
接着是执行fun函数，如上面说到的另外一个时间点发生的预编译，就是执行函数之前，现在就来说一下函数执行前的预编译是怎么样的。

2. 函数执行前的预编译

函数调用,也是会生成自己的作用域(**AO：**Activetion Object,执行期上下文)AO活动对象。函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
如果遇到AO对象上属性同名，则无情覆盖

生成AO对象：函数执行前的一瞬间，生成AO活动对象
分析生成AO属性：查找形参和变量声明放到AO对象，赋值为undefined
分析函数声明：查找函数声明放到AO对象并赋值为函数体。函数名为属性名,值为函数体；

逐行执行。

案例说明

拿的是上文中的代码示例。

第一步创建AO对象
```
AO{

}
```
查找形参和变量声明放到AO对象并赋值为undefined；
注意：fun函数里边的b是未经var声明的，所以是全局变量，不会被放在fun的AO上。
```
AO{
	a: undefined,//形参a与局部变量a同名
	c: undefined
}
```
将实参赋值到形参上
```
AO{
	a: 1,
	c: undefined,
}
```
查找函数声明放到AO对象并赋值为函数体，fun函数没有函数声明，所以忽略这一步。
函数执行之前的预编译完成，开始执行语句
执行代码

首先执行打印变量b，而此时fun的AO里边并没有变量b，所以会去GO对象里边找，此时的GO对象b的值为10，所以第一行代码打印出10；

第二行代码首先要看的是b = 2，然后GO对象里边b的值就被改为2了。

GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}

然后b再赋值给a，变量a是属于局部变量a，所以fun的AO对象里边a的值被改为2。
```
AO{
	a: 2,
	c: undefined,
}
```
接着下一个赋值语句是c = 123，所以AO对象中c的值被改为了123
```
AO{
	a: 2,
	c: 123,
}
```
此时再执行console.log(a)的值就是AO对象里边a的值 2；执行console.log(b)的值就是GO对象b的值 2，至此函数fun执行完毕，紧跟着fun的AO也会被销毁。