了解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'

總結

英文原文地址：https://www.valentinog.com/blog/var/

作者：Valentino

相關免費學習推薦：js視頻教程