Comprendre les principes de compilation, la portée, la chaîne de portée, la promotion variable et la zone morte temporaire de la série JS (1) dans un seul article

est écrit au début : Il s'agit d'une série que je suis sur le point de commencer à écrire en javascript colonne. Principalement à l'ère où les frameworks sont monnaie courante, même si vous utilisez des frameworks pour le travail, pour les entretiens et l'avancement technique, le fondement des connaissances de base en JS est la cerise sur le gâteau, et c'est aussi une connaissance que vous Vous devez apprendre. Bien que vous n'ayez pas besoin d'en savoir beaucoup sur les voitures pour conduire une voiture, il suffit de maîtriser les fonctions courantes de la voiture. Mais si vous connaissez les voitures, vous pouvez mieux conduire, et par la même occasion. Bien sûr, un article ne parlera pas uniquement d'un seul point de connaissance. Généralement, les points de connaissance associés seront connectés en série. Tout en enregistrant votre propre apprentissage, vous partagerez votre propre apprentissage et vous encouragerez mutuellement ! Si vous le pouvez, s'il vous plaît, donnez-moi un like Votre like me fera également travailler plus dur pour mettre à jour !

Aperçu

• Durée de consommation : 5-10 minutes
• Difficulté : Facile, ne pas courir, marcher après avoir lu

Principe de compilation JS

Regardons d'abord une ligne de code

var name='jack';复制代码

A nos yeux, c'est une ligne de code, quelque chose qui peut être fait dans une déclaration, mais, aux yeux de JS, le code de cette phrase devrait être présenté de la manière suivante

var name;    //编译阶段处理name='jack';    //执行阶段处理复制代码

Avez-vous trouvé que c'est différent du JS que vous connaissiez à l'origine C'est parce que la compilation JS est ? principalement divisé en deux parties Il y a deux phases, la phase de compilation et la phase d'exécution Voyons d'abord ce que font respectivement ces deux phases :

• Phase de compilation

  Le protagoniste de cette étape est le soi-disant compilateur , le compilateur recherchera dans la portée actuelle si une variable nommée name existe déjà. Si elle existe déjà, ne faites rien, ignorez simplement l'instruction var name et continuez la compilation, sinon, ajoutez une nouvelle variable appelée name dans la portée actuelle. Ensuite, le compilateur générera le code nécessaire au fonctionnement du moteur et le programme entrera dans la phase d'exécution

• phase d'exécution

  Le protagoniste de cette étape est le moteur JS familier. Lorsque le moteur JS est en cours d'exécution, il recherchera également d'abord la portée actuelle. Vérifiez s'il existe une variable appelée name. S'il y en a, alors c'est juste et attribuez la valeur directement. Sinon, cela signifie que la portée actuelle n'existe pas. Alors, pensez à sortir la tête. et aller à l'extérieur (portée parent) pour voir s'il y en a un. Sinon, recherchez à l'extérieur, couche par couche (bien sûr, s'il y a une couche parent à la fin, alors le moteur JS le fera). dites également qu'il est impuissant, puis lancez simplement une exception et montrez-la aux autres pour montrer que vous avez travaillé dur.

  La recherche mentionnée ci-dessus à l'extérieur, couche après couche, de la portée actuelle à la portée parent, à la portée parent du parent, et ainsi de suite, est ce qu'on appelle la portée Enchaîné, tout comme une chaîne, chaque le lien monte un par un. N'est-ce pas une description très appropriée ? Pour résumer, les scopes s'emboîtent dans les scopes, et il existe ce qu'on appelle la chaîne de scopes

作用域

• 定义

  大家都知道，变量最基本的能力就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改，而对于变量存储，访问的一套规则,就是所谓的作用域

• 分类

  • 全局作用域

  在任何函数外或者代码块之外的顶层作用域就是全局作用域，而里面的变量就是全局变量

  var name='jack';   //全局作用域function showName(){    //函数作用域  console.log(name);}{  name='test';    //块级作用域}showName();    //test复制代码

  可以看到全局变量，无论是在全局作用域，函数作用，还是块级作用域中都可以正常访问

  • 函数作用域

  在函数内的作用域就是函数作用域

  function showName(){  var name='jack';    //函数作用域}showName();   //方法调用{  console.log(name);  //块级作用域,Uncaught ReferenceError: name is not defined}console.log(name);  //全局作用域,Uncaught ReferenceError: name is not defined复制代码

  可以看到函数内部变量，在全局作用域以及块级作用域中，都无法访问，只有在函数内部，才能访问的到，所以函数内的变量也被称为局部变量

  • 块作用域

  在 ES6 中新出的两个新关键字 let和 const中，自带块级作用域，块级作用域相当于是只在这块代码块中生效，如果它被大括号 {} 所包围，那么大括号中就是一段代码块，代码块中使用 let 和 const 声明的变量也被称为局部变量

   {   let name='jack'; } console.log(name);    //Uncaught ReferenceError: name is not defined function showName{   console.log(name); } showName();    //Uncaught ReferenceError: name is not defined复制代码

  可以看到块级作用域中的变量，出了那个代码块，就找不到了

其实上面的三种情况，结合JS编译原理和作用域链向外不向内查找，思考一下，也不难理解

作用域链

回到作用域链，其实在上面已经解释的差不多了，作用域和作用域的嵌套，就产生了作用域链，另外要记住的一个特性就是作用域链的查找，向外不向内，想想探出头去，而不是看着锅里，就可以了

变量提升

先来看一段代码

name='jack';console.log(name);    //jackvar name;复制代码

你会发现，这段代码不会发生报错，并且能正常地运行，结合上面所说的JS编译原理，你就能想到，在JS的眼中，它的代码实际上是这样子的，这就是所谓的变量提升，说白了那就是代码的声明提到代码的最前面

var name;name='jack';console.log(name);    //jack复制代码

其实这个变量提升应该是照道理接着编译原理写下来的，为什么放到了最后呢，因为如果你忘了，正好往上翻一下，重新回温一遍JS编译原理

紧接着上面，让我们来看下不吃变量提升这一套的 let 和 const ，先来看一段代码

name='jack';console.log(name)    //Uncaught ReferenceError: Cannot access 'name' before initializationlet name;复制代码

黑人问号 ？？？ ，说好的变量提升呢，记住 let 和 const 的一个特点，禁用变量提升，这也是 ES6 故意为之的，将生命前不可用做到了强约束，总结而言，** var 存在变量提升， let 和 const 不存在变量提升**

既然已经提到了 const ，顺带提一下它声明了以后必须赋值的操作

const name;    //Uncaught SyntaxError: Missing initializer in const declaration复制代码

暂时性死区

紧接着上面，让我们来看下什么叫做暂时性死区，先来看一段代码

var name='jack';{  name='bob';  let name;    //Uncaught ReferenceError: Cannot access 'name' before initialization}复制代码

记住 ES6 中的一个特性，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。因为JS清楚地感知到了 name 是用 let 声明在当前这个代码块内的，所以会给这个变量 name 加上了暂时性死区的限制，它就不往外探出头了。

那么，如果我们把上面的let name;去掉，程序也将正常运行， name 的值也被成功修改为了bob，就是正常地按照作用域链的规则，向外探出头去了。

更多相关免费学习推荐：javascript（视频）

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!