這篇文章主要介紹了ES6中塊級作用域的案例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

臺州網站建設公司成都創(chuàng)新互聯公司,臺州網站設計制作，有大型網站制作公司豐富經驗。已為臺州上千余家提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站制作要多少錢，請找那個售后服務好的臺州做網站的公司定做！

全局作用域和函數作用域

在ES5中，只全局作用域和函數作用域。這會導致函數作用域覆蓋了全局作用域；亦或者循環(huán)中的變量泄露為全局變量。

例如：

//  1.函數作用域覆蓋了全局作用域,發(fā)生了變量提升，函數聲明大于var聲明的變量，因此函數里面的a提到了前面，在打印a，初始化一個undefined給a,所以打印出了undefined。
var a = '1';
function fn() {
    console.log(a);
    if (3<2) {
        var a  = 3;
    }
}
fn(); // undefined
// 2.循環(huán)中的變量泄露為全局變量
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('我在函數里面！');
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函數表達式沒錯
{
    let fa = '111';
    let fn = function () {
        console.log('我在函數里面！');
    }
    console.log(fa,fn); // 111 ? () { console.log('我在函數里面！');}
}

注意：ES6中允許函數在塊級作用域中可以聲明的條件是必須在大括號里面，否則就會報錯。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享ES6中塊級作用域的案例分析內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯建站，關注創(chuàng)新互聯網站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯建站，詳細的解決方法等著你來學習!

文章名稱：ES6中塊級作用域的案例分析-創(chuàng)新互聯
文章出自：http://jinyejixie.com/article40/dsisho.html

成都網站建設公司_創(chuàng)新互聯，為您提供電子商務、網站收錄、品牌網站制作、微信公眾號、企業(yè)建站、網站維護

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯