Eine ausführliche Erklärung von Let und Closing in ES6

Dieser Artikel führt hauptsächlich in ein tiefgreifendes Verständnis von Let und Closing in ES6 ein. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Dieser Artikel führt in ein tiefgreifendes Verständnis von Let und Closing in ES6 ein und teilt es mit allen. Die Details sind wie folgt:

Bevor wir mit diesem Artikel beginnen, werfen wir einen Blick auf einen Teil des Codes

for(var i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//10

Offensichtlich gibt der Code 10 aus, gibt aber nicht wie erwartet 3 zurück. Der Grund ist ebenfalls sehr einfach (js-Variablenförderung). Wenn die Funktion aufgerufen wird, greift sie in einem globalen Bereich auf i zu. Zu diesem Zeitpunkt wurde die for-Schleife ausgeführt und die globale Variable i= 10;

Wenn wir im ES5-Standard die erwarteten 3 zurückgeben möchten, ist der übliche Ansatz ebenfalls sehr einfach: Lassen Sie jede Funktion im Array einen separaten Bereich haben, dann müssen wir nur eine Funktion zur sofortigen Ausführung erstellen. Das war’s (in js gibt es keinen Bereich auf Blockebene, es werden nur der Funktionsbereich und der globale Bereich unterschieden), wie folgt:

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

Auf diese Weise befindet sich jede Funktion im Array in der Funktion einer Funktion zur sofortigen Ausführung. In der Domäne wird die Funktion zur sofortigen Ausführung in i übergeben. Tatsächlich führt die for-Schleife den folgenden Code aus:

  array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

Auf diese Weise entspricht jede Funktion in der Nummerngruppe einem separaten Funktionsbereich (der Funktion zur sofortigen Ausführung). Insgesamt wurden 10 Funktionsbereiche erstellt. Der i-Wert in diesen Funktionsbereichen ist der übergebene Wert 0...9 in während der Ausführung. Beim Ausführen von

array[3](); wird der i-Wert, auf den die Funktion zugreift, sofort anstelle des globalen i-Werts ausgeführt erwartete Wirkung.

Lassen Sie uns jedoch kurz über Abschlüsse sprechen. Unter Abschlüssen versteht man einen Abschluss, bei dem es sich um einen Stapelbereich handelt, der keine Ressourcen freigegeben hat und dessen Variablen sich in einem aktivierten Zustand befinden. Im obigen Beispiel weist das System Speicher zu, wenn die for-Schleife ausgeführt wird. Der js-Ausführungsthread erstellt den Ausführungsstapelbereich. Während der Ausführung wird festgestellt, dass die Variable i in der unmittelbaren Ausführungsfunktion von der internen Funktion referenziert wird Der Stapelbereich wird nicht im Speicher freigegeben ( Beim Aufruf (Array-Element) wird gemäß der Bereichskette zuerst auf die Variable im oberen Bereich zugegriffen (sofortige Ausführung der Funktion).

Abschlüsse werden hier nicht im Detail vorgestellt. Wenn Sie mehr über Abschlüsse erfahren möchten, lesen Sie bitte Kapitel 7 von „Javascript Advanced Programming“.

Wie bereits erwähnt, gibt es keine Blockebene Bereich in js, nur Unterscheiden Sie zwischen globalem Bereich und Funktionsbereich. In ES6 fügt let tatsächlich einen neuen Bereich auf Blockebene zu js hinzu. Der folgende Code ermöglicht beispielsweise den Zugriff auf die Werte in ihren jeweiligen Bereichen Erstellen eines Funktionsbereichs:

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

Sie sehen, dass wir nicht wie zuvor einen Funktionsbereich erstellen müssen, um den gewünschten Effekt zu erzielen. Nach der Einführung des Bereichs auf Blockebene ist es für uns bequemer, zu schreiben und Verstehen Sie den Code. Nach der for-Schleife ist {} ein Bereich auf Blockebene. Jede während jeder Schleife zurückgegebene Funktion verweist auf die Variable ihres entsprechenden Blockbereichs:

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

Es ist ersichtlich, dass ES6 den Blockumfang einführt. Es wird für uns später bequemer sein, Abschlussfunktionen zu erstellen.

Ich werde hier nicht viel über let und const beschreiben. Wenn Sie noch nie mit ES6 in Berührung gekommen sind, empfehle ich die Lektüre von „Einführung in die ES6-Standards“ von Lehrer Ruan Yifeng.

Nach dem Lesen des Konzepts ist für viele Menschen der erste Eindruck: „const stellt einen unveränderlichen Wert dar, während let verwendet wird, um die ursprüngliche Variable zu ersetzen.“ Ersetzen Sie var. Verwenden Sie let, wenn Sie Variablen deklarieren. Sie schreiben wahrscheinlich den folgenden Code: const kann seine Eigenschaften nach der Definition noch ändern.

Tatsächlich sind seine Verwendungsszenarien also sehr breit gefächert, einschließlich Konstanten, Konfigurationselementen und referenzierten Komponenten, der „meisten“ definierten Zwischenvariablen usw., alle sollten mit cosnt definiert werden. Im Gegenteil, was let betrifft, sollte es relativ wenige Verwendungsszenarien geben. Wir werden es nur in Schleifen (for, while-Schleifen) und einer kleinen Anzahl von Variablen verwenden, die neu definiert werden müssen.

Vermutung: In Bezug auf die Ausführungseffizienz können mehr Optimierungen in Bezug auf die statische Syntaxanalyse durchgeführt werden, da const nicht neu zugewiesen werden kann, was zu einer höheren Ausführungseffizienz führt.

Im obigen Code sollten also alle Teile, die let verwenden, tatsächlich const verwenden.

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

Verwandte Artikel:

Detaillierte Beschreibung der Verwendung von Axios zur Lösung von HTTP-Anforderungsproblemen in vue2 (ausführliches Tutorial)

Durch die Verwendung von vue What Gibt es Methoden, um HighCharts-Diagramme in das Projekt einzuführen?

Verwendung von @HostBinding() und @HostListener() in Angular (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung von Let und Closing in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!