Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Analyse der Variablendeklaration und Funktionsdeklarationsförderung in js (mit Beispielen)

不言
Freigeben: 2018-08-23 14:16:43
Original
1576 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine detaillierte Analyse der Variablendeklarationen und Funktionsdeklarationen in js (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist. .

Verbesserung der Variablendeklaration
1. Variablendefinition
Sie können var zum Definieren von Variablen verwenden. Wenn der Variablen kein Wert zugewiesen ist, ist der Anfangswert der Variablen undefiniert .

2. Variablenbereich
Variablenbereich bezieht sich auf den Bereich, in dem die Variable arbeitet. Variablen werden in globale Variablen und lokale Variablen unterteilt. Globale Variablen werden global definiert; lokale Variablen sind nur innerhalb einer Funktion gültig.
Im Funktionskörper haben lokale Variablen oder Parameter mit demselben Namen eine höhere Priorität als globale Variablen. Das heißt, wenn in der Funktion lokale Variablen oder Parameter mit demselben Namen wie die globalen Variablen vorhanden sind, werden die globalen Variablen durch die lokalen Variablen überschrieben.
Alle nicht mit var definierten Variablen gelten als globale Variablen

3. Funktionsumfang und Deklaration im Voraus
Die Funktionsrolle von JavaScript bezieht sich auf alle innerhalb der Funktionsvariablen deklarierten Variablen werden immer im Funktionskörper definiert, was bedeutet, dass die Variablen verfügbar sind, bevor sie deklariert werden. Dies bedeutet, dass alle Deklarationen in JavaScript-Funktionen (nur Deklarationen, aber keine Zuweisungen) an den Anfang der Funktion verschoben werden Funktionskörper, wobei die Variablenzuweisungsoperationen dort bleiben, wo sie waren. Nehmen Sie das folgende Beispiel:
Hinweis: Die Vorabdeklaration wird während der Vorkompilierung der JavaScript-Engine durchgeführt, bevor der Code ausgeführt wird.

var scope = 'global';function f(){
    console.log(scope);    
    var scope = 'local';
    console.log(scope);
}
Nach dem Login kopieren

Aufgrund der Deklarationsförderung innerhalb der Funktion sieht der obige Code tatsächlich so aus

var scope = 'global';function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}
Nach dem Login kopieren

Nach einer solchen Transformation ist die Antwort sehr offensichtlich. Da der Bereich vor der ersten console.log(scope)-Anweisung definiert, aber kein Wert zugewiesen wurde, ist die Referenz des Bereichs zu diesem Zeitpunkt undefiniert. Vor der zweiten console.log(scope)-Anweisung wurde dem Bereich ein zugewiesen Wert von 'local', daher ist das Ausgabeergebnis lokal.

Funktionsdeklarationsförderung
Funktionsdeklarationssyntax

f('superman');function f(name){
    console.log(name);
}
Nach dem Login kopieren

Funktionsausdruckssyntax

f('superman');var f= function(name){
    console.log(name);
}
Nach dem Login kopieren

Das Ausführen des obigen Codes führt zum Fehler Uncaught ReferenceError: f ist nicht definiert(...), die Fehlermeldung zeigt, dass f nicht definiert ist.
Warum gibt es Unterschiede zwischen Funktionsdeklarationen und Funktionsausdrücken im selben Code?
Dies liegt daran, dass die Funktionsdeklaration über eine sehr wichtige Funktion verfügt: das Heben der Funktionsdeklaration. Die Funktionsdeklarationsanweisung wird an die Spitze des externen Skripts oder des externen Funktionsbereichs gehoben (ist sie dem Heben von Variablen sehr ähnlich)? Genau aufgrund dieser Funktion kann die Funktionsdeklaration nach der Anweisung platziert werden, die sie aufruft. Wie im folgenden Beispiel sollte die Endausgabe aussehen? :

var getName = function(){
    console.log(2);
}function getName (){
    console.log(1);
}
getName();
Nach dem Login kopieren

Manche Leute denken vielleicht, dass das endgültige Ausgabeergebnis 1 ist. Lassen Sie es uns analysieren. In diesem Beispiel geht es um die Förderung von Variablendeklarationen und Funktionsdeklarationen. Wie bereits erwähnt, wird die Funktionsdeklarations-Promotionsfunktion getName(){} nach oben verschoben. Der Funktionsausdruck var getName = function(){} zeigt die Heraufstufung der Variablendeklaration. In diesem Fall ist getName also auch eine Variable, sodass die Deklaration dieser Variablen ebenfalls nach unten verschoben wird, während die Zuweisung der Variablen weiterhin an der ursprünglichen Position verbleibt. Es ist zu beachten, dass Funktionen Vorrang haben. Obwohl sowohl Funktionsdeklarationen als auch Variablendeklarationen hochgestuft werden, werden zuerst Funktionen und dann Variablen hochgestuft. Daher kann die obige Funktion wie folgt umgewandelt werden:

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出:2
Nach dem Login kopieren

Die endgültige Ausgabe lautet also: 2. Obwohl im ursprünglichen Beispiel die Funktionsdeklaration nach dem Funktionsausdruck steht, wird getName später durch die Zuweisungsoperation des Funktionsausdrucks überschrieben, da die Funktionsdeklaration nach oben verschoben wird, sodass 2 ausgegeben wird.

Verwandte Empfehlungen:



Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Variablendeklaration und Funktionsdeklarationsförderung in js (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!