了解JS中的var、let和const

這篇文章要跟大家介紹一下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中文網其他相關文章！