ES6 のブロックレベル スコープの詳細な紹介 (コード例)

不言
リリース: 2019-01-18 10:55:01
転載
2802 人が閲覧しました

この記事では、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 = &#39;apple&#39;;
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

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

// 2. 外层和内层都使用相同变量名,也都互不干扰
{  
    {
        let food = &#39;apple&#39;;
        console.log(food); // apple
    }
    let food = &#39;orange&#39;;
    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 のブロック レベルのスコープで関数を宣言できる条件は中かっこで囲む必要があります。そうしないとエラーが発生します。報告。

えええええ

以上がES6 のブロックレベル スコープの詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
es6
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!