Verstehen Sie var, let und const in JS

Dieser Artikel stellt Ihnen die Variablen var, let und const vor. Ich hoffe, dass er für alle hilfreich ist.

var

Die var-Anweisung wird verwendet, um eine Variable in JavaScript zu deklarieren, die den folgenden Regeln folgt: 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'

总结

zuweisbardeklarationspflichtigBeim Erscheinen im globalen Geltungsbereich erstellt var eine globale Variable. Darüber hinaus wird auf window eine mit demselben Namen erstellt: Wenn sie innerhalb einer Funktion deklariert wird, ist eine Variable auf diese Funktion beschränkt: var Deklarationen werden heraufgestuft: rrreee

Unerwartete globale Variable

Variablen, die ohne Deklaration zugewiesen werden (entweder var, let oder const). >) wird standardmäßig zu einer globalen Variablen: kann später

	块作用域	暂存死区	创建全局属性	可重新分配	可重新声明
var	❌	❌	✅	✅	✅
let	✅	✅	❌	✅	❌
const Bereich ist entweder Funktionsbereich oder globaler Bereich. Nicht durch die Temporary Dead Zone (TDZ) eingeschränkt. Es erstellt eine globale Eigenschaft mit demselben Namen im Fenster. Ist	. Ist	. Funktionsumfang und globaler Geltungsbereich	globale Eigenschaft	rrreee	rrreee

neu zugewiesen

oder

neu deklariert

werden. Beispiel für Neudeklaration:

rrreee

Beispiel für Neuzuweisung:

rrreee

let

Die let-Anweisung deklariert eine Variable in JavaScript, die den folgenden Regeln folgt:

• Gehört zu einem Blockbereich .
• Vorbehaltlich der vorübergehenden Totzone.
• Es werden keine globalen Eigenschaften für window erstellt.
• Ist zuweisbar.
• kann nicht angepasst werden

.

Blockbereich

🎜Mit let deklarierte Variablen erstellen keine globalen Eigenschaften auf window: 🎜rrreee 🎜Bei Deklaration Innerhalb einer Funktion ist eine Variable auf diese Funktion beschränkt: 🎜rrreee🎜Wenn sie in einem 🎜Block🎜 deklariert wird, ist eine Variable auf diesen Block beschränkt. Hier ist ein Beispiel für die Verwendung innerhalb eines Blocks: 🎜rrreee🎜Ein Beispiel mit einem if-Block: 🎜rrreee🎜Im Gegensatz dazu wird var nicht durch einen Block eingeschränkt: 🎜rrreeeStaging Dead Zone🎜let-Deklaration kann gefördert werden, aber 🎜 erzeugt eine Staging Dead Zone🎜: 🎜rrreee🎜Die Staging Dead Zone verhindert den Zugriff auf let-Anweisung. Ein weiteres Beispiel: 🎜rrreee🎜 Sie können sehen, dass die in den beiden Beispielen generierten Ausnahmen dieselben sind: Sie beweisen die Entstehung einer „vorübergehenden toten Zone“. 🎜<h3>Neu zuweisbar, nicht erneut deklarierbar</h3>🎜Jede mit <code>let deklarierte Variable 🎜 kann nicht erneut deklariert werden🎜. Ein Beispiel für eine erneute Deklaration, die eine Ausnahme auslöst: 🎜rrreee🎜Dies ist ein Beispiel für eine gültige Neuzuweisung: 🎜rrreee🎜const🎜🎜 Die const-Anweisung wird verwendet, um eine Variable in JavaScript zu deklarieren, die Folgendes befolgt Regeln: 🎜

• Es gehört zum Blockbereich.
• Vorbehaltlich der „vorübergehenden Totzone“.
• Es werden keine globalen Eigenschaften für window erstellt.
• 🎜Nicht neu zuordenbar🎜.
• 🎜kann nicht angepasst werden🎜.

Blockbereich

🎜Mit const deklarierte Variablen erstellen keine globalen Eigenschaften auf window: 🎜rrreee🎜Wenn sie innerhalb einer Funktion deklariert werden, ist die Variable auf die Funktion beschränkt: 🎜rrreee🎜 Wenn sie innerhalb eines 🎜Blocks🎜 deklariert wird, ist die Variable auf den Block beschränkt. Beispiel einer Blockanweisung {}: 🎜rrreee🎜Beispiel im if-Block: 🎜rrreee

Temporary Dead Zone

🎜const Deklarationen können hochgestuft werden, aber 🎜 wird in die vorübergehende tote Zone geraten 🎜: 🎜rrreee<h3>Nicht neu zuweisbar, nicht neu deklariert</h3>🎜Jede mit <code>const deklarierte Variable 🎜 Weder kann neu formuliert noch neu zugewiesen werden🎜 . Ein Beispiel für eine Ausnahme, die bei einer Neudeklaration ausgelöst wird: 🎜rrreee🎜Ein Beispiel für eine Neuzuweisung Beispiel: 🎜rrreee🎜Summary🎜 Bereich blockieren🎜🎜var🎜🎜❌🎜🎜❌🎜🎜✅🎜🎜✅🎜🎜✅🎜🎜🎜let 🎜🎜✅🎜🎜✅🎜 🎜❌🎜🎜✅🎜🎜❌🎜🎜🎜const🎜🎜✅🎜🎜✅🎜🎜❌🎜🎜❌🎜🎜 ❌🎜🎜🎜 🎜🎜🎜 Englische Originaladresse: https:/ /www.valentinog.com/blog/var/🎜🎜Autor: Valentino🎜🎜🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜🎜🎜js-Video-Tutorial🎜🎜🎜🎜

	Temporäre tote Zone	Globale Eigenschaften erstellen	Neu zuweisbar	Neu deklarierbar

Das obige ist der detaillierte Inhalt vonVerstehen Sie var, let und const in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!