Verständnis für JavaScript-Variablenförderung und -schließung

Dieser Artikel bietet Ihnen eine detaillierte Analyse der relevanten Wissenspunkte zur Förderung und Schließung von JavaScript-Variablen. Freunde, die sich dafür interessieren, können darauf verweisen.

Sehen wir uns zunächst eine Frage an:

<script>
 console.log(typeof a)//undefined
 var a=&#39;littlebear&#39;;
 console.log(a)//littlebear 
</script>
<script>
 console.log(typeof a)//string
 var a=1;
 console.log(a)//1
</script>

Im ersten Skript können Sie sehen, dass var a nach oben befördert wird und a = 'littlebear' an Ort und Stelle bleibt.

Der Grund, warum das zweite Skript nicht zuerst undefiniert ausgibt, liegt darin, dass a von var oben deklariert wurde, sodass var a nicht erneut heraufgestuft wird.

Sehen Sie sich eine andere Frage an:

<script>
  console.log(a)//function a(){}
  var a=1;
  console.log(a)//1
  function a(){}
  console.log(a)//1
</script>

Sie können sehen, dass die Funktion a(){} nach oben befördert wird. Beschreibung der Funktion Heben von Variablen

1. Heben von Variablen

Vor ES6 hatte JavaScript keinen Gültigkeitsbereich auf Blockebene (ein Paar geschweifte Klammern {} , also ein Bereich auf Blockebene), mit nur globalem
Bereich und Funktionsbereich. Durch das Hochziehen von Variablen wird eine Variablendeklaration an den Anfang ihres Gültigkeitsbereichs verschoben.
Das Beispiel des vorherigen Lebenslaufs lautet:

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
　　console.log(a); // undefined
　　var a = 'aaa';
　　console.log(a); // aaa
}
fn();

Der Grund für das obige Druckergebnis liegt in der variablen Förderung von js. Tatsächlich wird der obige Code wie folgt ausgeführt:

var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global
 
function fn () {
　　var a; // 变量提升，函数作用域范围内
　　console.log(a);
　　a = 'aaa';
　　console.log(a);
}
fn();

2. Funktionsförderung

Es gibt zwei Möglichkeiten, Funktionen in js zu erstellen: Funktionsdeklaration und Funktionsliteral. Das Hochziehen von Funktionen gibt es nur für Funktionsdeklarationen! Zum Beispiel:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

Der Grund, warum es die oben gedruckten Ergebnisse gibt, liegt darin, dass die Funktionsförderung in js dazu führt, dass der Code tatsächlich wie folgt ausgeführt wird:

function f1() {} // 函数提升，整个代码块提升到文件的最开始
console.log(f1);  
console.log(f2);  
var f2 = function() {}

3. Was ist Abschlüsse

Ein Abschluss ist eine Funktion, die Zugriff auf eine Variable im Gültigkeitsbereich einer anderen Funktion hat.

Einfach ausgedrückt ermöglicht Javascript die Verwendung interner Funktionen – das heißt, Funktionsdefinitionen und Funktionsausdrücke befinden sich im Funktionskörper einer anderen Funktion. Darüber hinaus haben diese inneren Funktionen Zugriff auf alle lokalen Variablen, Parameter und anderen inneren Funktionen, die in der äußeren Funktion deklariert sind, in der sie existieren. Ein Abschluss wird gebildet, wenn eine dieser inneren Funktionen außerhalb der äußeren Funktion aufgerufen wird, die sie enthält.

4. Umfang der Variablen

Um Abschlüsse zu verstehen, müssen Sie zunächst den Umfang der Variablen verstehen.

Der Umfang von Variablen besteht lediglich aus zwei Typen: globale Variablen und lokale Variablen.

Das Besondere an der Javascript-Sprache ist, dass globale Variablen direkt innerhalb der Funktion gelesen werden können.

Die interne Funktion kann auf die Variablen der externen Funktion zugreifen, da die Bereichskette der internen Funktion den Bereich der externen Funktion umfasst.

kann auch verstanden werden als: der Bereich der internen Funktion Funktion Es strahlt auf den Umfang der externen Funktion aus;

var n=999;
function f1(){
　alert(n);
}
f1(); // 999

Andererseits können die lokalen Variablen innerhalb der Funktion nicht außerhalb der Funktion gelesen werden.

function f1(){
　var n=999;
}
alert(n); // error

Hier gibt es etwas zu beachten: Wenn Sie Variablen innerhalb einer Funktion deklarieren, müssen Sie den Befehl var verwenden. Wenn Sie es nicht verwenden, deklarieren Sie tatsächlich eine globale Variable!

function f1(){
　 n=999;
}
f1();
alert(n); // 999

5. Wie man Abschlüsse schreibt und verwendet

var Circle={ 
  "PI":3.14159, 
  "area":function(r){ 
    return this.PI * r * r; 
  } 
}; 
alert( Circle.area(1.0) );//3.14159

Dass das Schreiben solcher Objekte auch eine Art Abschluss ist, war mir heute nicht klar , das ist die klassische Verwendung von Schließungen!

6. Zu beachtende Punkte bei der Verwendung von Abschlüssen

1) Da der Abschluss dazu führt, dass die Variablen in der Funktion im Speicher gespeichert werden, ist der Speicherverbrauch sehr groß. Daher können Schließungen nicht missbraucht werden, da dies sonst zu Leistungsproblemen auf der Webseite und möglicherweise zu Speicherverlusten im IE führt. Die Lösung besteht darin, alle nicht verwendeten lokalen Variablen zu löschen, bevor die Funktion beendet wird.

2) Der Abschluss ändert den Wert der Variablen innerhalb der übergeordneten Funktion außerhalb der übergeordneten Funktion. Wenn Sie daher die übergeordnete Funktion als Objekt, den Abschluss als öffentliche Methode und die internen Variablen als privaten Wert verwenden, müssen Sie darauf achten, den Wert der Variablen innerhalb der übergeordneten Funktion nicht zu ändern.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

vue lädt benutzerdefinierte JS-Dateimethode

Instanz der Funktionsausführung nach Verlassen der Vue-Seite

Verwendung des Vue-Karussell-Plug-ins vue-concise-slider

Das obige ist der detaillierte Inhalt vonVerständnis für JavaScript-Variablenförderung und -schließung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!