Folgen Sie mir, um Javascript-Var-Voranalysen und die Verbesserung der Funktionsdeklaration zu erlernen_Javascript-Fähigkeiten

1. Var-Variablen-Vorkompilierung

Die Syntax von JavaScript ähnelt C, Java und C# und wird zusammenfassend als C-ähnliche Syntax bezeichnet. Studierende mit Erfahrung in der C- oder Java-Programmierung sollten mit der Regel „Zuerst deklarieren, später verwenden“ vertraut sein. Wenn Sie nicht deklarierte Variablen oder Funktionen verwenden, wird während der Kompilierungsphase ein Fehler gemeldet. Allerdings kann JavaScript Variablen und Funktionen verwenden, bevor sie deklariert werden. Schauen wir uns das Geheimnis unten genauer an.

Schauen wir uns zunächst einen Code an:

(function() {
 console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined
})();

Führen Sie den obigen Code aus und es wird sofort ein Fehler gemeldet. Dies ist jedoch genau das, was wir erwartet haben, da die Variable noSuchVariable überhaupt nicht definiert wurde! Schauen wir uns den folgenden Code an:

(function() {
 console.log(declaredLater); //undefined
 var declaredLater = "Now it's defined!";
 console.log(declaredLater);// "Now it's defined!"
})();

Zuallererst ist der obige Code korrekt und es liegt kein Problem vor. Aber warum wird kein Fehler gemeldet? Die Variable „declaredLater“ wird nach der aufrufenden Anweisung definiert? Warum ist die Ausgabe undefiniert?

Dies wird tatsächlich durch den JavaScript-Parser verursacht. Der Parser platziert alle im aktuellen Bereich deklarierten Variablen und Funktionen an den Anfang des Bereichs bleiben an Ort und Stelle. Der obige Code sieht für den Parser tatsächlich so aus:

(function() {
 var declaredLater; //声明被提前到作用域开始处了！
 console.log(declaredLater); // undefined
 declaredLater = "Now it's defined!"; //赋值操作还在原地!
 console.log(declaredLater);//"Now it's defined!"
})();

Aus diesem Grund meldet der obige Code keine Ausnahme! Nachdem Variablen und Funktionen „erweitert“ wurden, wird die Variable „declaredLater“ tatsächlich vor der aufrufenden Funktion platziert. Gemäß der Definition der JavaScript-Syntax werden Variablen, die deklariert, aber nicht zugewiesen wurden, automatisch undefiniert zugewiesen Der Wert der Variable „declaredLater“ ist undefiniert. Später haben wir der Variablen „declaredLater“ einen Wert zugewiesen. Wenn wir die Variable also zum zweiten Mal drucken, wird „Jetzt ist sie definiert“ ausgegeben.

Sehen wir uns ein anderes Beispiel an:

var name = "Baggins";
(function () {
 console.log("Original name was " + name);// "Original name was undefined"
 var name = "Underhill";
 console.log("New name is " + name);// "New name is Underhill"
})();

Im obigen Code deklarieren wir zunächst einen Variablennamen. Unsere ursprüngliche Absicht besteht darin, die im globalen Bereich definierte Namensvariable auszugeben, wenn die Namensvariable zum ersten Mal gedruckt wird, und dann eine lokale Namensvariable in der Funktion zu definieren Decken Sie die globalen Variablen ab und geben Sie schließlich den Wert der lokalen Variablen aus. Das erste Ausgabeergebnis stimmt jedoch überhaupt nicht mit unseren Erwartungen überein. Der Grund dafür ist, dass die von uns definierten lokalen Variablen innerhalb ihres Gültigkeitsbereichs „erweitert“ sind, das heißt, sie haben die folgende Form:

var name = "Baggins";
(function () {
 var name; //注意：name 变量被提前了！
 console.log("Original name was " + name);// "Original name was undefined"
 name = "Underhill";
 console.log("New name is " + name);//"New name is Underhill"
})();

Da JavaScript solche „Macken“ aufweist, wird empfohlen, die Variablendeklaration oben im Gültigkeitsbereich zu platzieren, damit Sie sich immer daran erinnern können, aufmerksam zu sein.

2. Funktionsdeklaration ist „erweitert“

Worüber ich vorhin gesprochen habe, sind Variablen, als Nächstes sprechen wir über Funktionen.

Es gibt zwei Situationen, in denen eine Funktion „erweitert“ ist: eine ist die Funktionsdeklaration und die zweite ist die Zuweisung einer Funktion zu einer Variablen als Wert, also als Funktionsausdruck.

Lassen Sie uns zunächst über die erste Situation sprechen, den Code:

isItHoisted();//"Yes!"
function isItHoisted() { 
 console.log("Yes!");
}

Wie oben gezeigt, ermöglicht Ihnen der JavaScript-Interpreter die Verwendung vor der Funktionsdeklaration. Mit anderen Worten: Die Funktionsdeklaration ist nicht nur der Funktionsname, der „erweitert“ ist, sondern die gesamte Funktionsdefinition ist auch „erweitert“! Damit der obige Code korrekt ausgeführt werden kann.

Sehen wir uns den zweiten Fall an: Funktionsausdrucksform. Beginnen wir mit dem Code:

definitionHoisted();// "Definition hoisted!"
definitionNotHoisted();// TypeError: undefined is not a function
function definitionHoisted() { 
 console.log("Definition hoisted!");
}
var definitionNotHoisted = function () { 
 console.log("Definition not hoisted!");
};

Wir haben einen Vergleich durchgeführt, der dem ersten Typ entspricht. Die Variable definitionNotHoisted war jedoch nicht erweitert Das heißt, es stimmt vollständig mit der „Vorwärtsbewegung“ der Variablen überein, über die wir zuvor gesprochen haben, und da der Standardwert der Variablen „Vorwärtsbewegung“ undefiniert ist, gehört der gemeldete Fehler zur „Typinkongruenz“, da undefiniert keine Funktion ist. kann natürlich nicht aufgerufen werden.

Zusammenfassung
Durch die obige Erklärung kann es wie folgt zusammengefasst werden:

Die Variablendeklaration wird an die Spitze des Gültigkeitsbereichs verschoben und die Zuweisung bleibt bestehen
Die gesamte Funktionsdeklaration ist „erweitert“
Bei Verwendung eines Funktionsausdrucks ist nur die Variable „erweitert“, die Funktion ist nicht „erweitert“
3. Nebenwirkungen von Var

Ein kleiner Unterschied zwischen impliziten globalen Variablen und explizit definierten globalen Variablen besteht in der Möglichkeit, Variablen über den Löschoperator undefiniert zu lassen.

Globale Variablen, die über var erstellt wurden (in einem Programm außerhalb von Funktionen erstellt), können nicht gelöscht werden.
Implizite globale Variablen, die ohne var erstellt wurden (unabhängig davon, ob sie in einer Funktion erstellt wurden), können gelöscht werden.
Dies zeigt, dass implizite globale Variablen technisch gesehen keine wirklichen globalen Variablen sind, sondern Eigenschaften des globalen Objekts. Attribute können über den Löschoperator gelöscht werden, Variablen jedoch nicht:

// 定义三个全局变量
var global_var = 1;
global_novar = 2;  // 反面教材
(function () {
 global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var;  // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var;  // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在ES5严格模式下，未声明的变量（如在前面的代码片段中的两个反面教材）工作时会抛出一个错误。

4、单var形式声明变量

在函数顶部使用单var语句是比较有用的一种形式，其好处在于：

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
少代码（类型啊传值啊单线完成）
单var形式长得就像下面这个样子：

function func() {
 var a = 1,
  b = 2,
  sum = a + b,
  myobject = {},
  i,
  j;
 // function body...
}

您可以使用一个var语句声明多个变量，并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误（所有未初始化但声明的变量的初始值是undefined）和增加代码的可读性。在你看到代码后，你可以根据初始化的值知道这些变量大致的用途。

以上就是针对javascript的var预解析与函数声明提升的学习内容，希望对大家的学习有所帮助。