ES6中的塊級作用域與函數聲明

　　塊級作用域

　　　　　　

　　　　 定義：是一個語句，將多個操作封裝在一起，通常是放在一個大括號里，沒有返回值。

　　　　 為何需要塊級作用域?

   　　

　　　　 在ES6之前，函數只能在全局作用域和函數作用域中聲明，不能在塊級作用域中聲明。沒有塊級作用域導致很多場景不合理：

　　

  　 function block(){
        var a = 1;
        if(true){
            var a = 2;
        }
        console.log(a)   //2
    }
    block()


    function block(){
        let a = 1;
        if(true){
            let a = 2;
        }
        console.log(a)    //1
    }
    block()

　　　　上面的函數有兩個代碼塊，都聲明了變量a，運行后輸出 1。這表示外層代碼塊不受內層代碼塊的影響。如果兩次都使用var定義變量a，最后輸出的值才是 2

　　

　　

　　ES6中的塊級作用域：

     　　1、允許塊級作用域任意嵌套，外層作用域無法讀取內層作用域的變量

　　{{{{  
      {let i = 6;}  
      console.log(i);  // 報錯  
　　}}}}  

    　　　　 上面代碼使用了一個五層的塊級作用域，每一層都是一個單獨的作用域。第四層作用域無法讀取第五層作用域的內部變量。

 

    　　 2、內層作用域可以定義外層作用域的同名變量

    

    {{{{  
        let i = 5;  
        {let i = 10;}
        console.log(i)  //5  
    }}}} 

    {{{{  
        let i = 5;  
        {
            let i = 10;
            console.log(i) //10
         }          
    }}}}  

     　　

　　3、不需要立即執行匿名函數

   　　 立即執行函數：   

(function() {
      var  a = 0;
}());

　　塊級作用域：

　　{
     var a = 0;
　　}

    

　 塊級作用域中的函數聲明

     運行環境：ES6瀏覽器。

    可實現的行為：

    1、允許在塊級作用域內聲明函數

    2、函數聲明類似於var， 即會提升到全局作用域或函數作用域的頭部

    3、函數聲明還會提升到所有塊級作用域的頭部

  

function Func() {  
     console.log('outside');  
}  
(function() {  
     var Func = undefined;  
     if (false) {  
          function Func() {  
              console.log('inside');  
          }  
     }  
   Func();  
})();  //報錯

     考慮到環境導致的差異太大，應該避免在塊級作用域中聲明函數，如果需要，應該寫成函數表達式的形式，而不是函數聲明語句

let Func= function Func() {  
       console.log('inside');  
}; 
Func()

    

　 ES6的塊級作用域允許聲明函數的規則只在使用大括號的情況下成立：

'use strict'  
    if (true) {  
        function Func1() {} // 不報錯  
    }  
    if (true)  
        function Func2() {} // 報錯  

 

 

 

 

----------------- 從今天開始不定期連載ES6，主要是根據阮一峰的ES6文檔以及其他的一些相關文檔總結------------------