var與let區別-詳解塊級作用域與局部作用域

1.1-js三種作用域介紹

• 1.作用域概念（Scope） : 變量可以起作用的範圍區域

• 1.1 ES5 有兩種作用域

  • a.全局作用域(Global Scope) ： 函數外面聲明的變量,稱之爲全局變量。 可以在頁面任何地方被訪問
    • 全局變量生命週期 ： 從頁面加載 -> 到頁面關閉
  • b.局部作用域(Local Scope) : 函數裏面聲明的變量,稱之爲局部變量。 只能在函數裏面被訪問
    • 局部變量生命週期 ： 從函數開始執行 -> 到函數執行結束

• 1.2 ES6 在ES5原有基礎上新增第三種作用域

  • c.塊級作用域(Block Scope) : (1)let/const關鍵字聲明 (2) 大括號裏面聲明
    • 塊級變量聲明週期 : 從大括號開始 -> 到大括號結束

1-全局作用域

//1.1 全局作用域 : 在函數外部聲明的變量,可以在頁面任何地方被訪問

        var a = 10;//全局變量
        let b = 20;//全局變量

        function fn() {
            console.log(a, b);//10,20  
        };

        fn();

        console.log(a, b);//10,20
        console.log(window.a);//10
        console.log(window.b);//undefined

2-局部作用域

//1.2 局部作用域 : 在函數裏面聲明的變量, 只能在函數內部被訪問

        function fn() {
            var a = 10;//局部變量
            let b = 20;//局部變量

            console.log(a,b);//10,20
        };

        fn();

        console.log(a);//報錯  a is not defined
        console.log(b);//報錯  b is not defined

3-塊級作用域

//1.3 塊級作用域 :  在大括號裏面 且 使用let聲明的變量

        if(true){
            var a = 10;//全局變量
            let b = 20;//塊級變量(塊級作用域 ：只在大括號內部起作用)
            console.log(a,b);//10,20
            
        };

        console.log(a);//10
        // console.log(b);//報錯  b is not defined

1.2-塊級作用域(let)與局部作用域(var)區別

• 1.相同點
  • 都是隻可以在局部被訪問。
• 2.不同點
  • a. 局部範圍不同
    • 局部作用域 : 僅限於 ‘函數體’ 內部聲明的變量
    • 塊級作用域 : 一切大括號{} 內部使用let/const聲明的變量
  • b. 優先級不同(執行上下文不同)
    • 局部作用域優先級 > 塊級作用域 (在函數體大括號內部，無論使用什麼關鍵字聲明var/let/const都是局部作用域)
  • c. 預解析規則不同
    • var : 顯示變量提升。 （在聲明前可以訪問變量，獲取的是undefined）
      • js編譯器在預解析階段,會把變量的聲明提升到當前作用域最頂端，賦值語句還是在原地
    • let : 隱式變量提升。 （在聲明前不可以訪問變量，會報錯）
      • 變量的聲明也會提前，但是不允許被訪問
      • 暫時性死區(隱式變量提升)。一旦在當前作用域使用let,則js編譯器在預解析階段會將該變量"綁定"這個作用域,不受任何外部影響

區別1：局部範圍不同

• 局部作用域範圍 ： 函數內部
• 塊級作用域範圍 : 大括號內部

區別2：優先級不同(執行上下文不同)

• 函數體大括號 無論是let還是var，都是局部變量
  

區別3：預解析規則不同(let隱式變量提升，形成暫時性死區)

//2.塊級作用域與局部作用域區別
        function fn(){

            /* var預解析規則： 聲明提升到作用域最頂端  var a;  只是聲明提前 */
            console.log(a);//undefined
            
            /* 注意這個報錯原因： 不是因爲b沒有聲明，而是因爲b不能在賦值前被訪問 */
            console.log(b);//報錯  'b' before initialization
            
            var a = 10;
            let b = 20;
            console.log(a,b);
        };

        fn();

//聲明全局變量
var a = 10;
{
	/* 暫時性死區：一旦在塊級作用域使用let，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。
	 */
	//console.log(a);//報錯： 'a' before initialization
	let a = 100;
	console.log(a);//100
};
console.log(a);//10