Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

Was ist eine Voranalyse?

Konzept:

Bevor der JS-Code von oben nach unten ausgeführt wird, analysiert der Browser zunächst alle Variablendeklarationen. Diese Phase wird als Vorparsing bezeichnet.

Detaillierte Erklärung

Suchen Sie im Gültigkeitsbereich nach Variablen- und Funktionsdeklarationen (anonyme Funktionen haben keine Funktionsdeklarationen und werden daher nicht angehoben), deklarieren Sie sie dann im Voraus, lassen Sie die Zuweisungsvorgänge an Ort und Stelle und führen Sie den Code dann von oben nach unten aus. Dies ist ein Voranalyseprozess.

Der Unterschied zwischen Variablen- und Funktionsvorbereitung

Während der Voranalyse werden alle mit var deklarierten Variablen und mit function deklarierten Funktionen an den Anfang des Bereichs verschoben.

Mit var deklarierte Variablen werden nur beim Vorparsing vorab deklariert und die Zuweisungsanweisung bleibt bestehen;

Von function deklarierte Funktionen werden während der Voranalyse im Voraus deklariert und definiert. Wenn die Funktion ausgeführt wird, wird die Voranalyse innerhalb der Funktion durchgeführt.

Hinweis: Anonyme Funktionen haben keine Funktionsdeklarationen und werden daher nicht heraufgestuft.

Wiederholte Deklaration der var-Variable

Wenn var wiederholt deklariert wird: Wenn es bereits existiert, ignoriert der Compiler var und fährt mit der Kompilierung fort;

Wenn es nicht vorhanden ist, suchen Sie entlang der Anwendungsdomänenkette nach oben.

Wenn sie nicht gefunden wird, wird die Variable in diesem Bereich deklariert.

Priorität der Variablen- und Funktionsförderung

Zusammenfassen:

Die Funktionspromotion hat eine höhere Priorität als die Variablenpromotion und wird beim Deklarieren einer Variablen mit gleichem Namen nicht überschrieben, wird aber überschrieben, nachdem der Variablen ein Wert zugewiesen wurde.

Der folgende Inhalt wurde reproduziert von:

https://blog.csdn.net/caoyafeicyf/article/details/53172532

Ein genauerer Blick darauf, warum die Funktionspriorität höher ist als die Variablenpriorität

Der Pre-Parsing-Prozess des Browsers

Beginnen wir mit einer kleinen Frage.

var foo;
Funktion foo(){}
konsole.log(foo);

Das Ergebnis ist der Funktionskörper function foo(){}
Dann folgende Frage:

 function foo(){ }var foo;console.log(foo);

Das Ergebnis ist gleichzeitig der Funktionskörper

Funktion foo(){}

Viele Leute sagen, dass die Funktionsdeklaration eine höhere Priorität hat als die Variablendeklaration.

Also, warum? Dies beginnt bereits beim Vorparsing des Browsers.

Voranalyseprozess

Suche nach vorab analysierten Schlüsselwörtern

Suchen Sie nach dem Schlüsselwort var

Suchen Sie das Funktionsschlüsselwort

Vorabanalyse durchführen

Verwenden Sie zunächst das Schlüsselwort var, um die Bezeichner zu deklarieren, damit diese Bezeichner definiert werden. Nachdem die Bezeichner definiert wurden, wird bei Verwendung dieses Bezeichners kein Fehler gemeldet. Da jedoch kein Wert zugewiesen ist, ist sein Wert undefiniert.

Bisher enthält der Bezeichner einen Verweis auf die Funktion.

Einige Details zu beachten

  • Wenn das Schlüsselwort var wiederholt für denselben Bezeichner verwendet wird, werden alle Verwendungen außer der ersten ignoriert.
  • Beim Preparsing werden zuerst Variablendeklarationen und dann Funktionsdeklarationen verarbeitet.
  • Es besteht kein Grund zur Sorge darüber, wer die höhere Priorität hat. Dies sind nur oberflächliche Phänomene.
  • Verstehen Sie den Voranalyseprozess, alles ist nur eine vorübergehende Wolke

Nachdem wir das Prinzip der Voranalyse gelesen haben, kehren wir zu den beiden Fragen am Anfang dieses Artikels zurück, analysieren den Voranalyseprozess und verstehen im Detail, warum die Priorität der Funktion höher ist als die Priorität der Variablen. folgen Sie mir

Schauen wir uns zuerst den ersten an

var foo;
Funktion foo(){}
konsole.log(foo);

Der Voranalyseprozess ist:

var foo;<----var in Variablendeklaration
var foo;<----var aus der Funktionsdeklaration extrahiert
foo = function () {} <----Funktionsdeklaration extrahiert Zuweisung console.log(foo);

Schauen wir uns den zweiten an

Funktion foo(){}
var foo;
konsole.log(foo);

Der Voranalyseprozess ist:

var foo;<----var in Variablendeklaration
var foo;<----var aus der Funktionsdeklaration extrahiert
foo = function () {} <----Funktionsdeklaration extrahiert Zuweisung console.log(foo)

Vergleichen Sie die beiden. Was fällt Ihnen auf? Es stellt sich heraus, dass ihr Voranalyseprozess derselbe ist, weshalb Funktionen eine höhere Priorität als Variablen haben.

Wenn Sie den obigen Inhalt verstehen, dann hier eine weitere Frage:

var a = 1;
Funktion a(){}
konsole.log(a);

Wie analysiert der Browser es? Folgen wir meinem Gedankengang:

1. Der Parser sucht zuerst nach dem Schlüsselwort „var“, findet es in der ersten Zeile und extrahiert es an den Anfang.
2. Der Parser sucht nach dem Funktionsschlüsselwort und findet es in der zweiten Zeile. Er trennt zuerst var + Funktionsname und stellt fest, dass es dasselbe ist wie im ersten Schritt, sodass er es nicht verarbeitet. Dann beginnt er, die Funktionszuweisung zu trennen, d. h. a=function (){} , wobei a der Funktionskörper ist.
3. Der Parser verarbeitet dann die Variablenzuweisung a=1 und der Funktionskörper des vorherigen Schritts wird überschrieben und ist zu diesem Zeitpunkt a=1.
4. Schließlich verarbeiten wir console.log(a) und das Ergebnis ist natürlich 1.

Hier ist der vom Parser verarbeitete Codeprozess:

var a;<----var in Variablendeklaration
var a;<----var aus der Funktionsdeklaration extrahiert
a=function (){}<----Funktionsdeklaration extrahiert die Zuweisung a=1;
konsole.log(a);

Oben finden Sie detaillierte Informationen zum Unterschied zwischen JS-Preparsing und Variablenförderung bei Webinterviews. Weitere Informationen zu JS-Preparsing und Variablenförderung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • JavaScript-Dokumentobjektmodell DOM
  • Kennen Sie den Unterschied zwischen == und === in JS?
  • JavaScript – Undefinierte und Null-Differenz-Beispielanalyse
  • Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
  • Detaillierte Erklärung zum Hoisting in JavaScript (Variablen-Hoisting und Funktionsdeklarations-Hoisting)
  • So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
  • JavaScript-Closures erklärt
  • Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen
  • Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

<<:  So installieren Sie MySQL 5.7.29 mit einem Klick mithilfe eines Shell-Skripts

>>:  Codebeispiel für das Nutzungsszenario der Nginx-Domänenweiterleitung

Artikel empfehlen

Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript

Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...

js, um einen einfachen Drag-Effekt zu erzielen

In diesem Artikel wird der spezifische Code von j...

Detaillierte Erklärung der Docker Compose-Verwendung

Inhaltsverzeichnis Docker Compose-Nutzungsszenari...

mysql-8.0.17-winx64 Bereitstellungsmethode

1. Laden Sie mysql-8.0.17-winx64 von der offiziel...

Detailliertes Linux-Installationstutorial

(Win7-System) Tutorial zur Installation einer vir...

Zusammenfassung der gebräuchlichen Buchstaben in Unicode

Die meisten der ersten Computer konnten nur ASCII...

Zusammenfassung der verschiedenen Verwendungsmöglichkeiten von JSON.stringify

Vorwort Jeder, der schon einmal JSON verwendet ha...

Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt

Inhaltsverzeichnis 1. Welche Inhalte müssen üblic...

Lösung für die Baidu-Site-Suche, die https nicht unterstützt (getestet)

Seit kurzem ist https auch auf dem Handy möglich....

Vue3 kapselt die Textskelett-Effektkomponente der Seitennavigation

Vue3-Projektkapselung Seitennavigation Textskelet...

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter Ab 2.6.0 können Sie einen...