比較var和let的區別，理解函數作用域與塊級作用域

var與 let的區別：

var：函數作用域；存在變量提升；可重複定義；聲明的變量會作爲window的屬性。

let：塊級作用域；不存在變量提升（有暫時性死區）；不可重複定義；聲明的變量不會作爲window的屬性。

 

塊級作用域：即在{}花括號內的域，由{ }包括，比如if{}塊、for(){}塊。

函數作用域：變量在聲明它們的函數體以及這個函數體嵌套的任意函數體都是有定義的。

暫時性死區：在代碼塊中，在聲明變量之前，該變量是不可用的。

 

JS中作用域有：全局作用域、函數作用域，是沒有塊作用域的。塊級作用域是ES6中的。

var是js的，作用域是函數作用域的，let是ES6的，作用域是塊級作用域的。

下面看下例子比較：

<script>
           function test11(){
                console.log('函數內聲明前使用var變量',num);//undefined
                var num=23;

                // console.log('函數內聲明前使用let變量',firstname);//報錯：firstname is not defined
                let firstname;
            };
            test11();
            // console.log("函數內聲明函數外使用var變量：",num);//報錯：num is not defined
            // console.log("函數內聲明函數外使用let變量：",firstname);//報錯：firstname is not defined

            if(true) {
                let c = 3;
                if(true) {
                    console.log('c:',c);
                }

                console.log('塊內聲明前使用var',num);//undefined
                var num=2;
            }
            console.log("塊外使用var：",num);//2 （沒賦值的話打印undefined）
            console.log("塊外使用let：",c);//報錯：c is not defined
</script>

通過上述例子可見，var定義的變量是受到函數作用域限制的，不受if{}塊作用域的限制。在函數內聲明前使用var變量只是打印出undefined，而在函數外使用卻報錯is not defined。而在if{}塊作用域內聲明前使用和在塊內聲明後塊外使用，也只是打印出undefined，並不會報錯。說明var定義的變量的是否可見是受函數作用域限制的，但不受塊作用域的限制。

再看let定義的變量，是受塊作用域的限制的。let定義的變量不管是在函數內聲明前使用，還是函數內聲明後函數外使用，及塊內聲明塊外使用都報錯is not defined。