這篇文章要跟大家介紹一下JavaScript 的 var，let 和 const，有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
var
var 語句用來在JavaScript 中宣告一個變量，該變數遵守以下規則：
- 作用域範圍是函數作用域或全域作用域的。
- 不受暫存死區（TDZ）的限制。
- 它會在
window 上以相同的名稱建立一個全域屬性。
- 是可指派的。
- 是可宣告的。
函數作用域和全域作用域
當出現在全域作用域內時，var 會建立一個全域變數。另外它也會在window 上建立一個具有相同名稱的全域屬性：
var city = "Florence";
console.log(window.city); // "Florence"
登入後複製
當在函數內部宣告時，變數的作用域就是那個函數：
var city = "Florence";
function bubble() {
var city = "Siena";
console.log(city);
}
bubble(); // "Siena"
console.log(city); // "Florence"登入後複製
var 宣告會被提升：
function bubble() {
city = "Siena";
console.log(city);
var city; // hoists
}
bubble(); // "Siena"登入後複製
意外的全域變數
在沒有任何宣告的情況下所指派的變數（無論是var，let 還是const）在預設情況下會成為全域變數：
function bubble() {
city = "Siena";
console.log(window.city);
}
bubble(); // "Siena"登入後複製
為了消除這種行為，需要使用嚴格模式：
"use strict";
function bubble() {
city = "Siena";
console.log(window.city);
}
bubble(); // ReferenceError: assignment to undeclared variable city登入後複製
可重新指派和重新宣告
任何用var 宣告的變數都可以在以後進行重新分配或重新宣告。重新宣告的範例：
function bubble() {
var city = "Florence";
var city = "Siena";
console.log(city);
}
bubble(); // "Siena"登入後複製
重新指派的範例：
function bubble() {
var city = "Siena";
city = "Florence";
console.log(city);
}
bubble(); // "Florence"登入後複製
let
let 語句在JavaScript 中宣告一個變數，該變數遵守以下規則：
- 屬於區塊作用域。
- 受到暫存死區的限制。
- 它不會在
window 上建立任何全域屬性。
- 是可指派的。
-
無法重新宣告。
區塊作用域
用let 宣告的變數不會在window 上建立任何全域屬性：
let city = "Florence";
console.log(window.city); // undefined
登入後複製
當在函數內部宣告時，變數的作用域為此函數：
let city = "Florence";
function bubble() {
let city = "Siena";
console.log(city);
}
bubble(); // "Siena"
console.log(city); // "Florence"登入後複製
當在區塊中宣告時，變數的作用域為該區塊。以下是區塊中使用的範例：
let city = "Florence";
{
let city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"登入後複製
一個有if 區塊的範例：
let city = "Florence";
if (true) {
let city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"登入後複製
相反，var 並不受到區塊的限制：
var city = "Florence";
{
var city = "Siena";
console.log(city); // "Siena";
}
console.log(window.city); // "Siena"登入後複製
暫存死區
let 宣告可能會被提升，但會產生暫存死區：
function bubble() {
city = "Siena";
console.log(city); // TDZ
let city;
}
bubble();
// ReferenceError: can't access lexical declaration 'city' before initialization登入後複製
暫存死區可防止在初始化之前存取let 宣告。另外一個例子：
function bubble() {
console.log(city); // TDZ
let city = "Siena";
}
bubble();
// ReferenceError: can't access lexical declaration 'city' before initialization登入後複製
可以看到兩個例子中產生的異常都是一樣的：證明了「暫存死區」的出現。
可重新分配，不可重新宣告
任何用 let 宣告的變數都不能重新宣告。重新宣告引發例外狀況的例子：
function bubble() {
let city = "Siena";
let city = "Florence";
console.log(city);
}
bubble(); // SyntaxError: redeclaration of let city登入後複製
這是一個有效的重新指派的範例：
function bubble() {
let city = "Siena";
city = "Florence";
console.log(city);
}
bubble(); // "Florence"登入後複製
const
const 語句用來在JavaScript中宣告一個變量，該變數遵守以下規則：
- 是屬於區塊作用域的。
- 受到「暫存死區」的約束。
- 它不會在
window 上建立任何全域屬性。
-
無法重新指派。
-
無法重新宣告。
區塊作用域
用const 宣告的變數不會在window 上建立任何全域屬性：
const city = "Florence";
console.log(window.city); // undefined
登入後複製
當在函數內部宣告時，變數的作用域為此函數：
const city = "Florence";
function bubble() {
const city = "Siena";
console.log(city);
}
bubble(); // "Siena"
console.log(city); // "Florence"登入後複製
當在區塊中宣告時，變數的作用域為該區塊。區塊語句{} 的範例：
const city = "Florence";
{
const city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"登入後複製
在if 區塊中的範例：
const city = "Florence";
if (true) {
const city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"登入後複製
暫存死區
#const 宣告可能會被提升，但是會進入暫存死區：
function bubble() {
console.log(city);
const city = "Siena";
}
bubble();
// ReferenceError: can't access lexical declaration 'city' before initialization登入後複製
無法重新分配，不可重新宣告
用const 宣告的任何變數都不能重新聲明，也不能重新指派。一個在重新宣告時拋出例外狀況的範例：
function bubble() {
const city = "Siena";
const city = "Florence";
console.log(city);
}
bubble(); // SyntaxError: redeclaration of const city登入後複製
重新指派的範例範例：
function bubble() {
const city = "Siena";
city = "Florence";
console.log(city);
}
bubble(); // TypeError: invalid assignment to const 'city'登入後複製
總結
|
區塊作用域 |
暫存死區 |
建立全域屬性 |
#可重新指派 |
可重新宣告 |
var |
❌ |
❌ |
✅ |
✅ |
✅ |
let |
✅ |
✅ |
❌ |
#✅ |
❌ |
const |
✅ |
✅ |
#❌ |
❌ |
❌ |
#英文原文網址：https://www.valentinog.com/blog/var/
作者：Valentino
相關免費學習推薦：##js影片教學
#
以上是了解JS中的var、let和const的詳細內容。更多資訊請關注PHP中文網其他相關文章！
