Detaillierte Beispiele für Variablen- und Funktionspromotion in JavaScript

js-Ausführung

• Phase der lexikalischen Analyse: umfasst drei Teile: Analyse der formalen Parameter, Analyse der Variablendeklaration und Analyse der Funktionsdeklaration. Durch lexikalische Analyse wird der von uns geschriebene JS-Code in ausführbaren Code umgewandelt.
• Ausführungsphase

Variables Heben

• Es werden nur Deklarationen hochgezogen, Initialisierungen werden nicht hochgezogen
• Deklarationen werden an den Anfang des aktuellen Bereichs gehoben.

🌰 1:

console.log(Nummer)
Variablennummer
Zahl = 6

Nach der Vorkompilierung

Variablennummer
console.log(num) // undefiniert
Zahl = 6

🌰 2:

Zahl = 6
console.log(Nummer)
Variablennummer

Nach der Vorkompilierung

Variablennummer
Zahl = 6
console.log(Nummer) // 6

🌰 3:

Funktion bar() {
    wenn (!foo) {
        var foo = 5
    }
    konsole.log(foo) // 5
}
Bar()

Nach der Vorkompilierung

Funktion bar() {
    var foo // Deklaration wird innerhalb der if-Anweisung eingefügt if (!foo) {
        foo = 5
    }
    Konsole.log(foo)
}
Bar()

Funktionsförderung

• Funktionsdeklarationen und Initialisierungen werden angehoben
• Funktionsausdrücke werden nicht angehoben

🌰 1: Funktionsdeklarationen können angehoben werden

console.log(Quadrat(5)) // 25
Funktion Quadrat(n) {
    Rückgabewert n * n
}

Nach der Vorkompilierung

Funktion Quadrat(n) {
    Rückgabewert n * n
}
konsole.log(quadrat(5))

🌰 2: Funktionsausdrücke können nicht angehoben werden

console.log(Quadrat) // undefiniert
console.log(square(5)) // square ist keine Funktion
var Quadrat = Funktion(n) {
    Rückgabewert n * n
}

Nach der Vorkompilierung

var Quadrat
console.log(Quadrat)
Konsole.log(Quadrat(5))
Quadrat = Funktion() {
    Rückgabewert n * n
}

🌰 3:

Funktion bar() {
    foo() // 2
    var foo = Funktion() {
        console.log(1)
    }
    foo() // 1
    Funktion foo() {
        console.log(2)
    }
    foo() // 1
}
Bar()

Nach der Vorkompilierung:

Funktion bar() {
    var foo
    foo = Funktion foo() {
        console.log(2)
    }
    foo() // 2
    foo = Funktion() {
        console.log(1)
    }
    foo() // 1
    foo() // 1
}

Das Heben von Funktionen geht dem Heben von Variablen voraus

🌰 1:

console.log(foo) // gibt die Funktion aus function foo() {
    Konsole.log('foo')
}
var foo = 1

🌰 2:

var foo = 'hallo' // hallo
;(Funktion(foo) {
    Konsole.log(foo)
    var foo = foo || 'Welt'
    console.log(foo) //hallo
})(foo)
console.log(foo) // hallo

Nach der Vorkompilierung

var foo = "hallo"
;(Funktion(foo) {
    var foo
    foo = 'hallo' // Der Wert von foo wurde als Parameter übergeben console.log(foo) // hallo
    foo = foo || 'world' // foo hat den Wert hello, daher wird ihm nicht der Wert world zugewiesen
    console.log(foo) // hallo
})(foo)
console.log(foo) // hallo, gibt var foo = 'hallo' im globalen Bereich aus

Die Reihenfolge der JS-Variablenförderung und Funktionsförderung

Kürzlich stieß ich in einem schriftlichen Test auf eine Frage, in der es um die Reihenfolge des Hebens von Variablen und des Hebens von Funktionen ging. Zuvor wusste ich nur, dass durch var definierte Variablen und Funktionsdeklarationen ebenfalls angehoben werden, aber ich hatte ihre Reihenfolge und den detaillierten Prozess nicht eingehend studiert. Nachdem ich die Informationen konsultiert und selbst überprüft hatte, gelangte ich zu meinem eigenen Verständnis ihrer Reihenfolge. Kommen wir ohne weitere Umschweife direkt zur Sache.

Zunächst möchte ich mein Fazit ziehen: Die Funktionspromotion hat eine höhere Priorität als die Variablenpromotion und wird bei der Deklaration nicht von einer gleichnamigen Variablen überschrieben, sondern erst, wenn der gleichnamigen Variablen ein Wert zugewiesen wurde.

Sie können den folgenden Code sehen:

     console.log(a) // ƒ a(){} Bevor der Variablen a ein Wert zugewiesen wird, wird die Funktion a ausgedruckt.
     var a = 1;
     Funktion a(){}
     console.log(a) // 1 Nachdem die Variable a zugewiesen wurde, wird der Wert ausgegeben, der der Variable a entspricht.

Zunächst werden sowohl die Variablen- als auch die Funktionsdeklaration angehoben, aber die Priorität der Funktion beim Anheben ist höher als die der Variablen. Nachdem beide angehoben wurden, ist die Variable nur noch ohne Zuweisung definiert, sodass die Ausgabe Funktion a ist. Der detaillierte Ablauf ist wie folgt:

     function a(){} // Funktionsdeklaration Promotion a->fa (){}
     var a; // Variablenförderung console.log(a) // Zu diesem Zeitpunkt wird die Variable a nur ohne Zuweisung deklariert, sodass sie Funktion a nicht überschreibt --> Ausgabefunktion afa (){}
     a=1; //Variablenzuweisung console.log(a) // Zu diesem Zeitpunkt wird die Variable a zugewiesen --> Gib den Wert der Variable a 1 aus

Zusammenfassung: Da sowohl Funktionsdeklarationen als auch Variablen angehoben werden, wird, wenn eine Funktion den gleichen Namen wie eine Variable hat, die Funktion gedruckt, bevor der Variablen ein Wert zugewiesen wird, und der Wert der Variablen wird gedruckt, nachdem der Variablen ein Wert zugewiesen wurde.

Schauen wir uns nun einen weiteren Codeabschnitt an:

     ein(); // 2
     var a = function(){ // Behandle es als eine Funktion, die der Variable a zugewiesen ist
        console.log(1)
     }
     ein(); // 1
     Funktion a(){
        console.log(2)
     }
     ein(); // 1

Eigentlich möchte ich Ihnen nur sagen, dass nur Funktionsdeklarationen angehoben werden, nicht Funktionsausdrücke. Daher gibt der Code nach dem Funktionsausdruck 1 aus, da die Variable a zugewiesen wird, um die angehobene Funktion a zu überschreiben. Der detaillierte Ablauf ist wie folgt:

     Funktion a(){ // Funktion Promotion console.log(2)
     }
     var a; // Variablenförderung a(); // 2  
     a = function(){ // Nachdem die Variable a zugewiesen wurde, wird die obige Funktion a überschrieben
         console.log(1)
     }
     ein(); // 1
     ein(); // 1

Schauen wir uns einen weiteren Codeabschnitt an:

     A();
     Funktion a(){
         console.log(1)
     }
     Funktion a(){
         console.log(2)
     }

Gedruckt wird die Zahl 2. Der Grund ist einfach: Die zuerst deklarierte Zahl wird durch die später deklarierte Zahl überschrieben.

Zusammenfassen

Dies ist das Ende dieses Artikels über Variablen- und Funktions-Hoisting in JavaScript. Weitere relevante Inhalte zu Variablen- und Funktions-Hoisting in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!