Detaillierte Einführung in den Bereich auf Blockebene in ES6 (Codebeispiel)

Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) zum Bereich auf Blockebene in ES6. Ich hoffe, er wird Ihnen helfen.

Lassen Sie uns heute den Umfang auf Blockebene in ES6 besprechen.

Globaler Umfang und Funktionsumfang

In ES5 gibt es nur globalen Umfang und Funktionsumfang. Dies führt dazu, dass der Funktionsbereich den globalen Bereich abdeckt; andernfalls werden die Variablen in der Schleife in globale Variablen durchgesickert.

Zum Beispiel:

//  1.函数作用域覆盖了全局作用域,发生了变量提升，函数声明大于var声明的变量，因此函数里面的a提到了前面，在打印a，初始化一个undefined给a,所以打印出了undefined。
var a = '1';
function fn() {
    console.log(a);
    if (3<2) {
        var a  = 3;
    }
}
fn(); // undefined
// 2.循环中的变量泄露为全局变量
for(var i=0;i<5;i++) {
    console.log(i);
}
console.log(i); // 5;

ES6-Bereich auf Blockebene

Der Bereich auf Blockebene wird mit dem let-Befehl hinzugefügt, der äußere Bereich kann jedoch nicht Gehen Sie zum inneren Bereich, sehr sicher und klar. Selbst wenn sowohl die äußere als auch die innere Schicht denselben Variablennamen verwenden, stören sie sich nicht gegenseitig.

// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名，也都互不干扰
{  
    {
        let food = 'apple';
        console.log(food); // apple
    }
    let food = 'orange';
    console.log(food); // orange
}

Bereich und Funktionsdeklaration auf Blockebene

In ES5 können Funktionen nur im Bereich und Funktionsbereich der obersten Ebene deklariert werden, nicht auf Blockebene Domain. Aber in ES6 können Funktionen im Blockbereich deklariert werden.

Aber es wird bestimmte Probleme geben, da die Funktionsdeklaration an den Anfang des Codes gestellt wird. Daher wird ein Fehler gemeldet. Es ist am besten, Funktionsausdrücke zur Darstellung einer Funktion in ES6 zu verwenden.

Zum Beispiel:

//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log(&#39;我在函数里面！&#39;);
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = &#39;111&#39;;
    let fn = function () {
        console.log(&#39;我在函数里面！&#39;);
    }
    console.log(fa,fn); // 111 ƒ () { console.log(&#39;我在函数里面！&#39;);}
}

Hinweis: Die Bedingung, die die Deklaration von Funktionen im Bereich auf Blockebene in ES6 ermöglicht, muss in geschweiften Klammern stehen, andernfalls wird ein Fehler ausgegeben gemeldet.

// 1.报错的情况
if (4>2) {
    let fn = function () {};
}

//2.报错的情况
if (4>2)
    let fn = function () {}; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Bereich auf Blockebene in ES6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!