Verstehen Sie die Kompilierungsprinzipien, den Umfang, die Bereichskette, die Variablenförderung und die temporäre Totzone der JS-Serie (1) in einem Artikel

Vorn geschrieben: Dies ist die Javascript-KolumneIch bin dabei, eine -Serie zu starten, hauptsächlich in der Ära der weit verbreiteten Frameworks, obwohl Frameworks bei der Arbeit, für Interviews und den technischen Fortschritt verwendet werden In dieser Phase ist die Grundlage des grundlegenden JS-Wissens das Tüpfelchen auf dem i und es ist auch ein Teil des Wissens, das erlernt werden muss. Obwohl Menschen, die Autos fahren, nicht viel über Autos wissen müssen, müssen sie nur das Gemeinsame beherrschen Funktionen von Autos. Aber wer sich mit Autos auskennt, kann auch besser fahren. Natürlich geht es in einem Artikel nicht nur um einen einzelnen Wissenspunkt. Im Allgemeinen werden verwandte Wissenspunkte in Reihe geschaltet. Während Sie Ihr eigenes Lernen aufzeichnen, teilen Sie Ihr eigenes Lernen und ermutigen sich gegenseitig. Wenn Sie können, geben Sie mir bitte auch ein „Gefällt mir“, Ihre „Gefällt mir“-Angaben werden mich auch dazu bringen, härter an der Aktualisierung zu arbeiten!

Übersicht

Essenszeit: 5-10 Minuten
Schwierigkeit:
• Einfach
  , nicht rennen, sondern warten, bis man es sieht

JS Kompilierungsprinzip Schauen wir uns zuerst eine Codezeile an

var name='jack';复制代码

In unseren Augen ist dies jedoch etwas, das mit einer Codezeile und einer Anweisung erreicht werden kann denn dieser Satz sollte wie folgt lauten: Das vorgestellte

rrree

ist nicht dasselbe wie das JS, das Sie ursprünglich kannten. Das liegt daran, dass die JS-Kompilierung hauptsächlich in zwei Phasen unterteilt ist, die Kompilierungsphase und die Ausführungsphase zwei Stufen. Diese Dinge:

• Kompilierungsphase

  Der Protagonist dieser Phase ist der sogenannte Compiler. Dieser Compiler durchsucht den aktuellen Bereich, um zu sehen, ob bereits eine Datei mit dem Namen name. Wenn es bereits vorhanden ist, tun Sie nichts und ignorieren Sie es (27,31,35,.05); Schriftfamilie: Operator Mono, Consolas, Monaco, Monospace; , weiter kompilieren; wenn nicht, fügen Sie einen neuen mit dem Namen var name 这个声明，继续编译下去；如果没有，则在当前作用域里新增一个叫 name 的变量。然后，编译器会为引擎生成运行时所需要的代码，程序就进入了执行阶段

• 执行阶段

  这个阶段的主角就是大家所熟悉的JS引擎啦，JS引擎在运行的时候，也会先找遍当前作用域，看看是否有一个叫 name

JS-Engine. Wenn die JS-Engine ausgeführt wird, durchsucht sie zunächst auch den aktuellen Bereich, um festzustellen, ob es einen mit dem Namen name's Variable, wenn sie existiert, dann ist sie genau richtig und kann direkt zugewiesen werden. Wenn sie nicht existiert, bedeutet das, dass sie vorhanden ist Existiert im aktuellen Bereich nicht ist eine übergeordnete Ebene).

🎜Wie oben erwähnt, suchen Sie nach außen, vom aktuellen Bereich zum übergeordneten Bereich, zum übergeordneten Bereich usw. Dies ist die sogenannte Bereichskette, bei der jedes Glied nach oben geht Eine nach der anderen. Ist das nicht eine sehr treffende Beschreibung? Zusammenfassend lässt sich sagen, dass 🎜Bereiche innerhalb von Bereichen verschachtelt sind, und es gibt die sogenannte Bereichskette🎜🎜

作用域

• 定义

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

• 分类

  • 全局作用域

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

  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（视频）

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Kompilierungsprinzipien, den Umfang, die Bereichskette, die Variablenförderung und die temporäre Totzone der JS-Serie (1) in einem Artikel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!