Was ist der Unterschied zwischen dem Umfang auf Blockebene und dem Funktionsumfang in js? (Code-Analyse)

Was Ihnen dieser Artikel bringt, ist der Unterschied zwischen dem Umfang auf Blockebene und dem Funktionsumfang in js? (Code-Analyse) hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.

Warum brauchen wir einen Blockbereich?

ES5 verfügt nur über einen globalen Umfang und Funktionsumfang und keinen Umfang auf Blockebene, was viele unangemessene Szenarien mit sich bringt.

Im ersten Szenario kann die innere Variable die äußere Variable überschreiben:

var tmp = new Date();

function f(){
  console.log(tmp);
  if(false){
    var tmp = "hello";
  }
}

f(); // undefined

Im obigen Code ist das Ausgabeergebnis f, nachdem die Funktion undefined ausgeführt wurde Der Grund dafür ist, dass die Variable hochgestuft wird. Dies führt dazu, dass die innere tmp-Variable die äußere tmp-Variable überschreibt.

Im zweiten Szenario wird die für die Technologie verwendete Schleifenvariable als globale Variable durchgesickert:

var s = "hello";
for(var i=0;i<s.length;i++){
  console.log(s[i]);
}

console.log(i); // 5

Im obigen Code wird die Variable i nur zur Steuerung der Schleife verwendet, aber Nachdem die Schleife beendet ist, verschwindet sie nicht, sie wird in eine globale Variable durchgesickert.

ES6-Bereich auf Blockebene

letFügt JavaScript tatsächlich einen neuen Bereich auf Blockebene hinzu

function f1(){
  let n = 5;
  if(true){
    let n = 10;
  }
  console.log(n); // 5
}

Die obige Funktion verfügt über zwei Codeblöcke, die beide als Variable < deklariert sind 🎜> wird hinzugefügt und nach dem Ausführen wird 5 ausgegeben. Dies bedeutet, dass der äußere Codeblock nicht vom inneren Codeblock beeinflusst wird. Wenn Sie n verwenden, um die Variable var zu definieren, ist der endgültige Ausgabewert 10. n

Der äußere Bereich kann die Variablen des inneren Bereichs nicht lesen:

{
    {let insane = "hello"}
    console.log(insance); // 报错
}

Der innere Bereich kann Variablen mit demselben Namen wie der äußere Bereich definieren:

{
    let a = "hello";
    {let a = "hello"}
}

Blockebene Die Das Aufkommen des Bereichs macht den weit verbreiteten Ausdruck für sofort ausgeführte Funktionen (IIFE) tatsächlich nicht mehr erforderlich: Funktion: Da es keinen Bereich auf Blockebene gibt, wird der lokale Code in IIEF gekapselt, um den gewünschten Effekt zu erzielen, ohne redundante temporäre Variablen einzuführen. Nach der Einführung des Blockbereichs ist IIEF natürlich unnötig!

// IIFE写法
(function(){
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

Wie im obigen Code ist tmp in IIFE gekapselt, sodass die Funktion der oberen Ebene nicht verschmutzt wird. Bei einem Bereich auf Blockebene besteht keine Notwendigkeit, es in IIEF zu kapseln, sondern einfach einzufügen direkt in eine Blockebene.

function f(){
    ...
    swap(var_a,var_b);
    (function swap(a,b){
        var tmp;
        tmp = a;
        a = b;
        b=tmp;
    })(var_a,var_b);
}

Vereinfacht ausgedrückt besteht der Zweck der sofortigen Ausführung der anonymen Funktion darin, einen Bereich auf Blockebene einzurichten. Da es nun einen echten Bereich auf Blockebene gibt, besteht keine Notwendigkeit, die anonyme Funktion sofort auszuführen .

Verwandte Empfehlungen:

Erläuterung von Beispielen für den Bereich und den Funktionsabschluss in js

PHP{}-Bereich auf Blockebene Detaillierte Beschreibung Erklärung

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen dem Umfang auf Blockebene und dem Funktionsumfang in js? (Code-Analyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!