！在 ES6 之前，JavaScript 只有兩種作用域： 全局變量 與 函數內的局部變量

全局作用域

//變量在任何函數之外聲明時，它就成為了一個全局變量。全局變量可以在代碼的任何地方被訪問或修改，包括所有函數內。
var globalVar = "I'm global";function exampleFunction() {console.log(globalVar); // 輸出: I'm global
}console.log(globalVar); // 輸出: I'm global
exampleFunction();

函數作用域

//變量是在函數內部使用 var 關鍵字聲明的，那么這個變量就是局部變量，它的作用范圍僅限于該函數內部
function outerFunction() {var localVar = "I'm local";function innerFunction() {console.log(localVar); // 輸出: I'm local}innerFunction();
}outerFunction();
// console.log(localVar); // 拋出錯誤: ReferenceError: localVar is not defined

一、var

1. 函數級作用域，有變量提升

函數級作用域例子

function txt(){var a = 1;//局部變量
}
txt();
console.log(a)//會報錯(無法在外部訪問)

變量提升例子

function example() {var a = 10;if (true) {var a = 20;console.log(a); // 輸出 20}console.log(a); // 輸出 20
}

這段代碼相當于

function example() {var a;      // 聲明提升a = 10;     // 賦值保留在原位if (true) {a = 20; // 依然是修改同一個變量console.log(a); // 20}console.log(a); // 20（因為一直是同一個變量）//var在{}塊級內部聲明的變量在外部也是可訪問的
}

為什么會有變量提升? 導致了什么問題？
1.允許函數在聲明之前被調用
2.會有一些不易察覺的bug

//使用var
if (true) {console.log(a); // undefined（變量提升）var a = 10;
}
console.log(a); // 10
//在賦值前訪問變量會得到 undefined，容易引發 bug

//使用let
if (true) {console.log(a); // 報錯：ReferenceError（暫時性死區）let a = 10;
}
//let和const在聲明前訪問會拋出錯誤，避免了訪問未定義變量的問題

二、let（ES6新增）

1. 塊級作用域，不會影響外部作用域

function example() {let a = 10;if (true) {let a = 20;console.log(a); // 20}console.log(a); // 10（因為塊作用域中的 a 是獨立的）
}

2.let 關鍵字在不同作用域，或不同塊級作用域中是可以重新聲明賦值

let x = 2;       // 合法{let x = 3;   // 合法
}{let x = 4;   // 合法
}

3. 聲明時可以不用先初始化

// 在這里不可以使用 carName 變量(沒有變量提升）let carName;

4. 在相同的作用域或塊級作用域中，不能使用 let/var 來重置 let/var 聲明的變量

三、const（ES6新增）

1.const聲明的常量必須初始化

// 錯誤寫法
const PI;
PI = 3.14159265359;// 正確寫法
const PI = 3.14159265359;

2. 聲明一個只讀的常量，常量的值不能更改

const PI = 3.141592653589793;
PI = 3.14;      // 報錯
PI = PI + 10;   // 報錯

3. 使用 const 定義的對象或者數組，其實是可變的，但是我們不能對常量對象重新賦值

// 創建常量對象
const car = {type:"Fiat", model:"500", color:"white"};// 修改屬性:
car.color = "red";// 添加屬性
car.owner = "Johnson";

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 錯誤

4. const 關鍵字在不同作用域，或不同塊級作用域中是可以重新聲明賦值的（在相同的作用域不行）

const x = 2;       // 合法{const x = 3;   // 合法
}{const x = 4;   // 合法
}

四、循環作用域

1.使用 var 關鍵字

//聲明的變量是全局的，包括循環體內與循環體外
var i = 5;
for (var i = 0; i < 10; i++) {// 一些代碼...
}
// 這里輸出 i 為 10

2. 使用 let 關鍵字

//聲明的變量作用域只在循環體內，循環體外的變量不受影響
var i = 5;
for (let i = 0; i < 10; i++) {// 一些代碼...
}
// 這里輸出 i 為 5