Maison >interface Web >js tutoriel >Maîtriser complètement le processus de précompilation JavaScript

Maîtriser complètement le processus de précompilation JavaScript

WBOYavant: 2022-02-10 17:57:231879parcourir

Cet article vous apporte des connaissances pertinentes sur la précompilation en javascript Il présente principalement les problèmes liés à la précompilation à travers des exemples. J'espère qu'il sera utile à tout le monde.

Phases (trois)

Analyse lexicale et syntaxique : L'analyse lexicale et syntaxique consiste à vérifier si le code JavaScript contient des erreurs de syntaxe de bas niveau
Pré-compilation : Cet article se concentre sur
Code d'exécution : Le code d'exécution est le code d'analyse du moteur js, analyse une ligne et exécute une ligne

Ce chapitre parle principalement du pré-compilation processus

processus de pré-compilation

la pré-compilation est également divisée en 2 points dans time:

Le premier est avant l'exécution du code JavaScript
Le second est avant l'exécution de la fonction.

Mais avant le code JavaScript, la pré-compilation précédente n'a lieu qu'une seule fois, et la pré-compilation avant l'exécution de la fonction est effectuée plusieurs fois.

1. Pré-compilation avant l'exécution du code JavaScript

Avant l'exécution du code JavaScript, un objet global sera d'abord créé, qui peut être compris comme un objet window ou comme 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
1. 生成AO对象：函数执行前的一瞬间，生成AO活动对象
2. 分析生成AO属性：查找形参和变量声明放到AO对象，赋值为undefined
3. 分析函数声明：查找函数声明放到AO对象并赋值为函数体。函数名为属性名,值为函数体；
如果遇到AO对象上属性同名，则无情覆盖
逐行执行。

案例说明

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

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

}
```
查找形参和变量声明放到AO对象并赋值为undefined；

注意：fun函数里边的b是未经var声明的，所以是全局变量，不会被放在funGO
( Global Object), on ne peut pas le voir (impossible d'imprimer)
variables globales
déclarées, var inutilisées et let Les variables déclarées by code> sont placés dans l'objet GO, et la valeur est <code>indéfinie (qui rappelle la "promotion de variable") Analysez la ** déclaration de fonction : ** Mettez ensuite également toutes les déclarations de fonction dans l'objet GO et attribuez la valeur au corps de la fonction elle-même (Le nom de la fonction est le nom de l'attribut et la valeur est le corps de la fonction. Si le nom de la fonction et le nom de la variable sont identiques, ils seront écrasés sans pitié
)
Description du cas
```
AO{
	a: undefined,//形参a与局部变量a同名
	c: undefined
}
```
Combiné avec les étapes mentionnées ci-dessus :
🎜🎜🎜Tout d'abord, avant que le code dans <script></script> ne soit exécuté , un objet GO (objet fenêtre) sera créé 🎜
```
AO{
	a: 1,
	c: undefined,
}
```
🎜🎜🎜 toutes les variables globales déclarées et les variables non déclarées à l'aide de var et let seront placées dans l'objet GO, et la valeur est affectée à undefined🎜
```
GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}
```
🎜🎜🎜 analyse 🎜Déclaration de fonction🎜, le nom de la fonction est le nom de l'attribut et la valeur est le corps de la fonction si le nom de la fonction et le nom de la variable sont le. de même, ils seront écrasés sans pitié🎜
```
AO{
	a: 2,
	c: undefined,
}
```
🎜🎜🎜À ce moment, le processus de pré-compilation avant l'exécution du code js est terminé et l'exécution du code js commence d'abord. La valeur est attribuée à 🎜a comme 1. 🎜, et les modifications correspondantes seront apportées dans l'objet GO : 🎜
```
AO{
	a: 2,
	c: 123,
}
```
🎜🎜🎜 Ensuite, a est imprimé A ce moment, la variable a sera trouvée sur l'objet GO, et la valeur de a à ce moment est 1 , donc console.log(a) est égal à 1. Imprimez ensuite b, recherchez également l'objet GO et constatez que la valeur de b est undefined, donc console.log(b) est égal à undefined. 🎜🎜🎜🎜Ensuite, l'instruction d'affectation est exécutée : b = 10; A ce moment, la valeur de 🎜b dans l'objet GO devient 10🎜🎜rrreee🎜🎜🎜Ensuite, la ligne de code suivante est une fonction **fun, cette fonction ne sera pas exécutée pour le moment**, car dans le processus de pré-compilation précédent, elle était en fait placée au début du code, ce qui est le légendaire déclaration à l'avance, alors ignorez-la. Effectuez ensuite l'opération d'affectation🎜 à 🎜a2 : a2 = 20, et l'objet GO change également : 🎜rrreee🎜🎜🎜Ensuite, la fonction fun est exécutée, comme mentionné ci-dessus . La précompilation qui se produit à un moment donné a lieu avant l'exécution de la fonction. Parlons maintenant de la précompilation avant l'exécution de la fonction. 🎜🎜🎜🎜2. La pré-compilation avant l'exécution de la fonction🎜🎜🎜🎜l'appel de fonction générera également sa propre portée (**AO : **Activetion Object, contexte d'exécution)🎜AO🎜objet d'activité. 🎜Lorsqu'une fonction est appelée, elle est générée juste avant l'exécution. S'il y a plusieurs appels de fonction, plusieurs AO seront générés🎜🎜🎜🎜🎜Générer des objets AO🎜 : Au moment avant l'exécution de la fonction, les objets actifs AO sont généré🎜🎜🎜 Analyser et générer les attributs AO 🎜 : Trouver 🎜 les paramètres formels 🎜 et 🎜 la déclaration de variable 🎜 et les mettre dans l'objet AO, attribuer la valeur à undefined 🎜🎜🎜 Analyser la déclaration de fonction 🎜 : Rechercher la déclaration de fonction, placez-la dans l'objet AO et attribuez-la comme corps de fonction. Le nom de la fonction est le nom de l'attribut et la valeur est le corps de la fonction 🎜🎜🎜🎜Si l'attribut du même nom sur l'objet AO est rencontré, il sera écrasé sans pitié 🎜🎜🎜🎜🎜 et exécuté ligne par ligne. 🎜🎜🎜
Description du cas

🎜L'exemple de code ci-dessus est pris. 🎜🎜🎜🎜🎜La première étape consiste à créer un objet AO🎜rrreee🎜🎜🎜Trouvez les 🎜paramètres formels🎜 et la 🎜déclaration de variable🎜 dans l'objet AO et attribuez la valeur à undefined ; blockquote>🎜Remarque : fun n'est pas déclaré par var, c'est donc une variable globale et ne sera pas placée sur l'AO de fun. 🎜🎜rrreee🎜🎜🎜Attribuez le 🎜paramètre réel🎜 au 🎜paramètre formel🎜🎜rrreee🎜🎜🎜Trouvez la déclaration de fonction et placez-la dans l'objet AO et affectez-la au corps de la fonction. alors ignorez cette étape. 🎜
函数执行之前的预编译完成，开始执行语句
执行代码
1. 首先执行打印变量b，而此时fun的AO里边并没有变量b，所以会去GO对象里边找，此时的GO对象b的值为10，所以第一行代码打印出10；
2. 第二行代码首先要看的是b = 2，然后GO对象里边b的值就被改为2了。
```
GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}
```
3. 然后b再赋值给a，变量a是属于局部变量a，所以fun的AO对象里边a的值被改为2。
```
AO{
	a: 2,
	c: undefined,
}
```
4. 接着下一个赋值语句是c = 123，所以AO对象中c的值被改为了123
```
AO{
	a: 2,
	c: 123,
}
```
5. 此时再执行console.log(a)的值就是AO对象里边a的值 2；执行console.log(b)的值就是GO对象b的值 2，至此函数fun执行完毕，紧跟着fun的AO也会被销毁。
综上所述，依次打印出来的值为：1，undefined，10，2，2。

总结

预编译两个小规则：

函数声明整体提升(无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
变量声明提升(无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

预编译前奏

imply global(暗示全局变量-专业术语) 即：任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是window，这里再一次说明了JavaScript是基于对象的语言，base on window)
一切声明的全局变量，全是window的属性；var a=12;等同于window.a = 12;(会造成window这个对象特别臃肿)
函数预编译发生在函数执行前一刻(懒加载机制)

相关推荐：javascript学习教程、web前端开发视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript Object 局部变量全局变量 var 形参实参 JS console undefined 对象作用域变量提升

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Une brève analyse approfondie de Node.js pour apprendre à ajouter des hooks dans la fonction requireArticle suivant：Une brève analyse approfondie de Node.js pour apprendre à ajouter des hooks dans la fonction require

Articles Liés

Voir plus

Maîtriser complètement le processus de précompilation JavaScript

Phases (trois)

processus de pré-compilation

1. Pré-compilation avant l'exécution du code JavaScript

案例说明

2. 函数执行前的预编译

案例说明

Description du cas

Description du cas

总结

预编译两个小规则：

预编译前奏

Articles Liés