JavaScript-Thema eins: Variablenförderung und Vorkompilierung

Inhaltsverzeichnis: Am Ende geschrieben

• (Verwandte kostenlose Lernempfehlungen:
• Javascript-Video-Tutorial
)
• Vorwort
• Dieser Artikel ist der erste Artikel in der „JavaScript Specialized Advanced Series“ Die gesamte Serie wird wahrscheinlich zum Beispiel Folgendes enthalten:

• Prävention Throttling

Flattening

Deep and Shallow Copy

Array-Deduplizierung

Sortierung

...

und andere klassische Spezialwissenspunkte. Sie werden „Specialized Advanced“ genannt, weil sie bei vielen Gelegenheiten eine hohe „Auftrittsrate“ haben. Um nicht zu einem Google Content Searcher zu werden, wurde die „JavaScript Specialized Advanced Series“ geboren! ! !
• 
• 1. Interessantes Phänomen
• Nach dem gesunden Menschenverstand muss JavaScript-Code von oben nach unten ausgeführt werden. Wenn Sie eine Zeichenfolge ausgeben müssen, müssen Sie natürlich im Voraus eine Variable vom Typ Zeichenfolge deklarieren. Wenn ich die tiefgreifende Wahrheit verstehen kann, lese ich den folgenden Code.

• 1.1 Die Eröffnung dachte ich

  var str = '123';console.log(str); // 123

Lass uns die Position des Codes ändern und ihn uns noch einmal ansehen:

• console.log(str); // undefinedvar str = '123';

Ich scheine das Muster gefunden zu haben!!!

Als ich mit dem Lesen fertig war Die ersten beiden Codeteile werden ausgeführt. Nach "tiefem Nachdenken" scheine ich die Regel gefunden zu haben, das heißt: In der Funktion nach dem aktuellen Codeblock, wenn die Variable vor der Variablendeklaration und -initialisierung verwendet wird Code>, der korrekte Wert wird nicht erhalten. <code>google内容搜索师，《JavaScript专项进阶系列》诞生了！！！

一、有趣的现象

按照大家的常识，JavaScript代码在执行是一定是自上而下的，你需要输出一个字符串，当然需要提前声明一个保存string类型的变量。如果深奥的道理我都能懂，于是我阅读了下面的代码。

1.1 我以为的开局

var val = '余光';(function(){
    console.log(val); // 余光})();

我们调换一下代码的位置在再看：

var val = '余光';(function(){
    console.log(val); // undefined
    var val = '测试';})();

我好像找到规律了!!!

当我看完了前两段代码并且进行了“深度思考”后，我好像找到规律了，那就是：在当前代码块后函数中，在变量声明和初始化之前使用变量，会拿不到正确的值。

1.2 实际上是这样的

带着上面的“结论”我来到了这里

name = '余光'; // 未添加关键字（未声明），name为全局变量，，即window.name = '余光'var name; // 再次声明name，此时name未进行初始化，它的值是undefined吗？console.log(name); // ？

果然如此！，在变量声明和初始化之后耶稣也阻挡不了我拿到val的值，我说的！！！

当我看到下面一段代码时，我已经产生了动摇，此事必要蹊跷。

// 我们看到的代码：var name = '余光';

Ps：如果大家立即执行函数存在疑问，不妨看看《JavaScript之深入理解立即调用函数表达式（IIFE）》吧～

这…我怂了，是什么原因导致这样的现象发生的呢？Js又是如果处理的呢？

二、Js的预解析

在当前的作用域内，无论在哪里变量声明，在幕后，都会进行一次看不见的移动。

注意：仅声明被“移动”。即声明和赋值在某些时候被动分开了。而这次看不见的移动实际上就是Js在编译阶段的解析。

来看一段《你知不知道的Js》中经典的例子：

// 声明(Declaration)var name; // 声明但未初始化，所以分配 undefined// 初始化(Initialization)name = '余光'; // 初始化（赋值）

结果是成功打印“余光”，这样看不见的移动就发生在Js预解析（编译）之中。

2.1 核心：预解析

为了搞明白这个核心问题，我们需要回顾一下，引擎会在解释JavaScript代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。感兴趣的小伙伴可以阅读《JavaScript中的变量对象》和《从作用域到作用域链》这两篇文章哦～

因此，发生这样的事情，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。当你看到var a = 2；时，可能会认为这是一个声明。但JavaScript实际上会将其看成两个声明：var a；和a = 2;。

• 第一个定义声明是在编译阶段进行的。
• 第二个赋值声明会被留在原地等待执行阶段。

即代码是这样写的：

var name; // 声明name提到作用域顶部，并被分配了一个undefinedname = '余光'; // 进行初始化操作console.log(name); // '余光'

但Js会将它解析成：

foo();function foo(){
    console.log(name); // undefined
    var name = '余光';}

所以本小结的一段代码应该这样分析：

foo();function foo(){
    console.log(name); // undefined
    var name = '余光';}

2.2 注意：只有声明被提升了

只有声明会被提升，而赋值和其他代码逻辑会在执行到代码的位置时才会生效。所以会有下面的问题：

function foo(){
    var name; // 声明
    console.log(name); // undefined
    name = '余光'; // 初始化}foo(); // 函数执行

函数被提升了，自然可以正常执行，但变量仅仅是声明被提升了。

2.3 每个作用域都会进行提升操作

还是上面的代码：

foo();var foo; // 1function foo(){
    console.log('余光');}foo = function(){
    console.log('小李');}

实际它在编译时是这样的：

function foo(){
    console.log('余光');}foo(); // 余光foo = function(){
    console.log('小李');}

三、提升之间的优先级

既然我们知道了变量和函数

1.2 Das ist tatsächlich der Fall

🎜Ich bin mit der oben genannten „Schlussfolgerung" hierher gekommen🎜

foo();var foo = function(){
    console.log(1);}// TypeError: foo is not a function

🎜Das ist tatsächlich der Fall! , nach 🎜 Variablendeklaration und Initialisierung 🎜 Jesus kann mich nicht davon abhalten, den Wert von val zu bekommen, das habe ich gesagt! ! ! 🎜🎜Als ich den folgenden Code sah, war ich schon erschüttert, da muss irgendetwas faul sein. 🎜

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;

🎜Ps: Wenn Sie Fragen zur sofortigen Ausführung von Funktionen haben, können Sie sich auch „JavaScript's Deep Understanding of Instant Invoked Function Expressions (IIFE)“ ansehen~🎜🎜Das... Ich habe Angst, was das verursacht Phänomen passieren? Wie geht Js damit um? 🎜

🎜🎜🎜2. Js vorab analysieren🎜🎜🎜Im aktuellen Bereich wird es eine unsichtbare Bewegung hinter den Kulissen geben, unabhängig davon, wo die Variable deklariert ist. 🎜🎜Hinweis: 🎜Erklärt nur, dass es „verschoben“ wird🎜. Das heißt, Deklaration und Zuweisung werden irgendwann passiv getrennt. Und diese unsichtbare Bewegung ist eigentlich das Parsen von Js während der Kompilierungsphase. 🎜🎜Werfen wir einen Blick auf ein klassisches Beispiel aus „Do You Know JS“: 🎜rrreee🎜Das Ergebnis ist, dass „peripheres Licht“ erfolgreich gedruckt wird, sodass während der Js-Voranalyse (Kompilierung) eine 🎜unsichtbare Bewegung🎜 auftritt. 🎜

2.1 Kern: Vorparsing

🎜Um dieses Kernproblem zu verstehen, müssen wir überprüfen, dass die Engine zuerst den JavaScript-Code kompiliert, bevor sie ihn interpretiert. Ein Teil der Kompilierungsphase besteht darin, alle Deklarationen zu finden und sie dem entsprechenden Bereich zuzuordnen. Interessierte Freunde können die beiden Artikel „Variable Objekte in JavaScript“ und „Vom Scope zur Scope-Kette“ lesen ~ 🎜🎜 Daher gilt, wenn so etwas passiert, inklusive Variablen und Funktion werden zuerst verarbeitet, bevor Code ausgeführt wird. Wenn Sie var a = 2; sehen, denken Sie vielleicht, dass es sich hierbei um eine Anweisung handelt. Aber JavaScript sieht dies tatsächlich als zwei Deklarationen: var a; und a = 2;. 🎜🎜🎜Die erste Definitionsanweisung erfolgt während der Kompilierungsphase. 🎜🎜Die zweite Zuweisungsanweisung bleibt an Ort und Stelle und wartet auf die Ausführungsphase. 🎜🎜🎜Das heißt, der Code ist wie folgt geschrieben:🎜rrreee🎜Aber Js wird ihn analysieren in:🎜rrreee🎜Ein Codeteil in dieser Zusammenfassung sollte also wie folgt analysiert werden:🎜rrreee

2.2 Hinweis: Nur die Anweisung wird hochgestuft

🎜🎜Nur Deklarationen werden hochgestuft, während Zuweisungen und andere Codelogik nur wirksam werden, wenn der Code ausgeführt wird🎜. Es entsteht also folgendes Problem: Die Funktion 🎜rrreee🎜 wird hochgestuft und kann natürlich normal ausgeführt werden, aber die Variable ist nur als hochgestuft deklariert. 🎜

2.3 Jeder Bereich wird hochgestuft

🎜Immer noch der obige Code:🎜rrreee🎜Tatsächlich sieht es beim Kompilieren so aus:🎜rrreee

🎜🎜🎜3. Priorität zwischen Werbeaktionen 🎜🎜🎜Jetzt das Wir wissen, dass Variablen und Funktionen hochgestuft werden. Wie bestimmen sie die Priorität zwischen ihnen? 🎜

3.1 函数会被首先提升，然后才是变量

我们分析下面的代码：

foo();var foo; // 1function foo(){
    console.log('余光');}foo = function(){
    console.log('小李');}

本着函数优先提升的原则，他会被解析成这样：

function foo(){
    console.log('余光');}foo(); // 余光foo = function(){
    console.log('小李');}

注意，var foo 因为是一个重复声明，且优先级低于函数声明所以它被忽略掉了。

3.2 函数字面量不会进行函数提升

最直观的例子，就是在函数字面量前调用该函数：

foo();var foo = function(){
    console.log(1);}// TypeError: foo is not a function

这段程序中：

1. 变量标识符foo被提升并分配给所在作用域（在这里是全局作用域），因此在执行foo()时不会导致ReferenceError（），而是会提示你 foo is not a function。
2. 然后就是执行foo，foo此时并没有赋值（注意变量被提升了）。由于对undefined值进行函数调用而导致非法操作，因此抛出TypeError异常。

四、ES6和小结

ES6新增了两个命令let和const，用来声明变量，有关它们完整的概念我会在《ES6基础系列》中总结，提起它们，是因为变量提升在它们身上不会存在。

4.1 变量提升是可以规避的

let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

在变量提升上，const和let一样，只在声明所在的块级作用域内有效，也不会变量提升

4.2 小结

1. 变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部，但变量的初始化不会提升；
2. 函数提升：函数声明可以被看作是函数的整体被提升到了代码的顶部，但函数字面量表达式并不会引发函数提升；
3. 函数提升优先与变量提升；
4. let和const可以有效的规避变量提升

最后提炼一下：JavaScript引擎并不总是按照代码的顺序来进行解析。在编译阶段，无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理，这个过程被称为提升。声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。

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

Das obige ist der detaillierte Inhalt vonJavaScript-Thema eins: Variablenförderung und Vorkompilierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!