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

总结