ES6의 블록 수준 범위에 대한 자세한 소개(코드 예)

이 글은 ES6의 블록 수준 범위에 대한 자세한 소개(코드 예제)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

오늘은 ES6의 블록 수준 범위에 대해 논의해 보겠습니다.

전역 범위와 함수 범위

ES5에는 전역 범위와 함수 범위만 있습니다. 이로 인해 함수 범위가 전역 범위를 포함하게 됩니다. 그렇지 않으면 루프의 변수가 전역 변수로 유출됩니다.

예:

//  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 블록 수준 범위

새 블록 수준 범위를 추가하려면 let 명령을 사용하세요. 외부 범위는 매우 안전하고 명확한 내부 범위를 얻을 수 없습니다. 외부 레이어와 내부 레이어가 모두 동일한 변수 이름을 사용하더라도 서로 간섭하지 않습니다.

// 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
}

블록 수준 범위 및 함수 선언

ES5에서는 블록 수준 범위가 아닌 최상위 범위와 함수 범위에서만 함수를 선언할 수 있습니다. 하지만 ES6에서는 블록 범위 내에서 함수를 선언할 수 있습니다.

그러나 함수 선언이 코드 맨 앞으로 가져오기 때문에 특정한 문제가 있을 것입니다. 따라서 오류가 보고됩니다. ES6에서는 함수 표현식을 사용하여 함수를 나타내는 것이 가장 좋습니다.

예:

//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;);}
}

참고: ES6에서 블록 수준 범위에서 함수를 선언하는 것을 허용하는 조건은 해당 함수가 중괄호 안에 있어야 한다는 것입니다. 그렇지 않으면 오류가 보고됩니다.

rreee

위 내용은 ES6의 블록 수준 범위에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!