JavaScript 作用域與 var、let、const關鍵字

一、JavaScript 作用域

1、全局作用域

2、函數作用域

3、塊級作用域

4、綜合示例

5、總結

二、var、let、const

1、var 關鍵字

2、let 關鍵字

3、const 關鍵字

4、總結

5、使用場景

一、JavaScript 作用域

在JavaScript中，作用域是指程序中可訪問變量（對象和函數同樣也是變量）的集合；

作用域決定了變量的可見性和生命周期；

簡單來說（個人理解）：作用域就是指，變量能夠正常被訪問的區域；

有三種主要的作用域類型：全局作用域、函數作用域、塊級作用域；

1、全局作用域

當在函數外部聲明變量時，默認在全局作用域中，即為全局變量；
該變量可以在整個程序的任何地方（在所有腳本和函數中）使用，直到它們被銷毀或程序結束；
全局變量通常在瀏覽器環境中由window對象持有；
window對象的內置屬性都擁有全局作用域；

<script>var myName  = "zyl";console.log("全局作用域中的myName ：", myName );console.log(window.myName );
</script>

?注意：在全局作用域中聲明的myName變量，被window對象持有；

2、函數作用域

當在函數內部聲明變量時，即在函數作用域中；
該變量只在該函數內部可見；
函數作用變量在函數執行完畢后會被銷毀，除非它們被返回或以其他方式被外部作用域引用；

<script>function fn(){var myName = "zyl";console.log("函數作用域中的myName：", myName);}fn();console.log(myName);    //ReferenceError: myName is not defined
</script>

注意：在函數作用域中聲明的變量只在函數內部可見，函數外面時訪問不到的；?

3、塊級作用域

JavaScript ES6 引入了塊級作用域，通過let和const關鍵字聲明變量，它們只在聲明所在的代碼塊內可見；
這種作用域提供了更細粒度的控制，可以避免全局污染；
塊級作用域在循環內部聲明變量時特別有用；

<script>{let myName  = "zyl";console.log("塊級作用域中的myName ：", myName );}console.log(myName);
</script>

?注意：在塊級作用域中聲明的變量，只在該塊內可見，代碼塊的外面是訪問不到的；

4、綜合示例

<script>var globalVar = "全局作用域";function fn(){var fnVar = "函數作用域";{let blockVar = "塊級作用域";console.log("代碼塊中，訪問塊級作用域中的變量，blockVar：", blockVar);console.log("代碼塊中，訪問函數作用域中的變量，fnVar：", fnVar);console.log("代碼塊中，訪問全局作用域中的變量，globalVar：", globalVar);}// console.log("函數中，訪問塊級作用域中的變量，blockVar：", blockVar);    // 報錯：ReferenceError: blockVar is not definedconsole.log("函數中，訪問函數作用域中的變量，fnVar：", fnVar);console.log("函數中，訪問全局作用域中的變量，globalVar：", globalVar);}fn();// console.log("函數外部，訪問塊級作用域中的變量，blockVar：", blockVar);  // 報錯：ReferenceError: blockVar is not defined// console.log("函數外部，訪問函數作用域中的變量，fnVar：", fnvar);    // 報錯：ReferenceError: fnvar is not definedconsole.log("函數外部，訪問全局作用域中的變量，globalVar：", globalVar);
</script>

5、總結

塊級作用域中聲明的變量，只能夠在該塊內被訪問；
函數作用域中聲明的變量，只能在函數內部，以及該函數內部的代碼塊中被訪問；
全局作用域中聲明的變量，能在任何地方被訪問；

二、var、let、const

在JavaScript中，聲明變量需要使用var、let和const關鍵字，這三者有和特點和區別？

1、var 關鍵字

（1）聲明全局變量

使用 var 關鍵字在全局作用域中聲明的變量，即為全局變量；

改變了被window對象持有；

可以在任何地方被訪問；

var price = "10.00"
console.log("全局作用域，price值為：", price);
console.log("window對象的price，值為：", window.price);function fn() {console.log("函數作用域，price值為：", price);{console.log("塊級作用域，price值為：", price);}
}
fn();

（2）聲明局部變量

使用 var 關鍵字在函數作用域中聲明的變量，即為局部變量；

只能在函數內，包括函數內的代碼塊中被訪問；

不能在函數作用域外被訪問；

function fn() {var price = "10.00"console.log("函數作用域，price值為：", price);{console.log("塊級作用域，price值為：", price);}
}
fn();console.log("全局作用域，price值為：", price);      // 報錯：ReferenceError: price is not defined

（3）存在變量提升

使用var關鍵字聲明的變量，存在變量提升；

存在變量提升：在代碼執行前，變量的聲明已經被提升到了函數的頂部，但沒有初始化；

console.log("使用var聲明之前，price值為：", price);
var price = "10.00"
console.log("使用var聲明之后，price值為：", price);

注意：

這里在使用var聲明price之前，打印輸出price并沒有報錯，而是輸出了undefined；

這是因為使用var關鍵字聲明的變量，存在變量提升；

執行下面的代碼時：

...
console.log("使用var聲明之前，price值為：", price);
var price = "10.00"
...

相當于執行：

...
var price;
console.log("使用var聲明之前，price值為：", price);
price = "10.00"
...

（4）聲明的變量，可以被重新賦值

使用var關鍵字聲明的是變量，可以被重新賦值；

var price = "10.00"
console.log("使用var聲明變量price，值為：", price);price = "9.99"
console.log("修改后的price，值為：",price);

（5）聲明的變量，可以被重新聲明

使用var關鍵字重復聲明同一個變量時，后續的聲明會覆蓋之前的；

var price = "10.00"
console.log("var聲明變量price，值為：", price);var price = "9.99"
console.log("var聲明變量price，值為",price);

（6）一次可以聲明多個變量

使用var關鍵字一次可以聲明多個變量，中間用逗號隔開即可；

var price = "10.00", conut = 20;
console.log("var聲明變量price，值為：", price);
console.log("var聲明變量count，值為",conut);

2、let 關鍵字

（1）聲明塊級作用域變量

使用let關鍵字聲明的變量只在let命令所在的代碼塊內部有效，即let所在的{ }內；

function fn() {let count = 99;console.log("count值為：", count);{let count = 88;console.log("count值為：", count);}console.log("count值為：", count);
}
fn();

（2）不存在變量提升

使用let關鍵字聲明的變量不存在變量提升，只能在聲明之后被訪問；

如果在聲明之前訪問變量，將會拋出一個引用錯誤；

// console.log("使用let聲明之前，count值為：", count);     // 報錯：ReferenceError: Cannot access 'count' before initialization
let count = 99;
console.log("使用let聲明之后，count值為：", count);

（3）聲明的變量，可以被重新賦值

使用let關鍵字聲明的變量，可以被重新賦值；

let count = 99;
console.log("使用let聲明變量count，值為：", count);count = 88
console.log("修改后的count，值為：", count);

（4）聲明的變量，不能被重新聲明

使用let關鍵字聲明的變量，不能被重新聲明；

let count = 99;
console.log("使用let聲明變量count，值為：", count);let count = 88      // 報錯： SyntaxError: Identifier 'count' has already been declared

（5）一次可以聲明多個變量

使用let關鍵字一次可以聲明多個變量，中間用逗號隔開即可；

let price = "10.00", conut = 99;
console.log("let聲明變量price，值為：", price);
console.log("let聲明變量count，值為",conut);

3、const 關鍵字

const關鍵字的特點與let相似，主要區別在于const關鍵字用來聲明只讀的變量，即常量，不能被重新賦值；

（1）聲明塊級作用域變量

使用const關鍵字聲明的變量只在const命令所在的代碼塊內部有效，即const所在的{ }內；

function fn() {const product = "蘋果";console.log("product值為：", product);{const product = "西瓜";console.log("product值為：", product);}console.log("product值為：", product);
}
fn();

（2）不存在變量提升

使用const關鍵字聲明的變量不存在變量提升，只能在聲明之后被訪問；

如果在聲明之前訪問變量，將會拋出一個引用錯誤；

// console.log("使用const聲明之前，product值為：", product);     // 報錯：ReferenceError: Cannot access 'product' before initialization
const product = "蘋果";
console.log("使用const聲明之后，product值為：", product);

（3）聲明的變量，不能被重新賦值

使用const關鍵字聲明的變量，不能被重新賦值；

該變量是只讀的，即常量；

const product = "蘋果";
console.log("使用const聲明變量product，值為：", product);product = "西瓜";   // 報錯：TypeError: Assignment to constant variable.

（4）聲明的變量，不能被重新聲明

使用const關鍵字聲明的變量，不能被重新聲明；

const product = "蘋果";
console.log("使用const聲明變量product，值為：", product);const product = "西瓜";   // 報錯：SyntaxError: Identifier 'product' has already been declared

（5）一次可以聲明多個變量

使用const關鍵字一次可以聲明多個變量，中間用逗號隔開即可；

const price = "9.99", count = 99,  product = "蘋果";
console.log("使用const聲明變量price，值為：", price);
console.log("使用const聲明變量count，值為：", count);
console.log("使用const聲明變量product，值為：", product);

4、總結

（1）var、let、const 的不同點

序號	不同點	說明
1	變量作用域	var用來聲明全局變量和局部變量； let和const用來聲明塊級作用域中的變量；
2	變量提升	var聲明的變量存在變量提升； let和const聲明的變量不存在變量提升（只能在聲明之后訪問）；
3	重新賦值	var和let聲明的變量可以被重新賦值； const聲明的變量不能被重新賦值（只讀，常量）；
4	重新聲明	var聲明的變量可以被重新聲明； let和const聲明的變量不能被重新聲明；