JS의 var, let 및 const 이해

이 기사에서는 JavaScript의 var, let 및 const에 대해 소개합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 모든 사람에게 도움이 되기를 바랍니다.

var

var 문은 JavaScript에서 변수를 선언하는 데 사용되며 다음 규칙을 따릅니다. 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는 전역 변수를 생성합니다. 또한 동일한 이름으로 window에 을 생성합니다: 함수 내부에서 선언되면 변수의 범위는 해당 함수로 지정됩니다: var 선언이 승격됩니다: rrreee

예기치 않은 전역 변수

선언 없이 할당된 변수(var, let 또는 const) >)는 기본적으로

	块作用域	暂存死区	创建全局属性	可重新分配	可重新声明
var	❌	❌	✅	✅	✅
let	✅	✅	❌	✅	❌
const 범위는 함수 범위 또는 전역 범위입니다. 임시 데드존(TDZ)의 제한을 받지 않습니다. window에 동일한 이름을 가진 전역 속성이 생성됩니다.	.	입니다. 함수 범위 및 전역 범위	전역 속성	rrreee	rrreee

전역 변수

가 됩니다.

rrreee

이 동작을 제거하려면

엄격 모드

를 사용해야 합니다.

rrreee

재할당 및 재선언

var로 선언된 모든 변수 는 나중에

재할당하거나 재선언할 수 있습니다. 재선언의 예: rrreee재할당의 예: rrreee

let

🎜 let 문은 다음 규칙을 따르는 JavaScript의 변수를 선언합니다. 🎜

• 블록 범위에 속합니다. .
• 🎜일시 데드존🎜이 적용됩니다.
• window에 전역 속성을 생성하지 않습니다.
• 🎜할당 가능🎜.
• 🎜다시 말할 수 없습니다🎜.

블록 범위

🎜let로 선언된 변수는 window에 전역 속성을 생성하지 않습니다: 🎜rrreee 🎜선언된 경우 함수 내에서 변수의 범위는 해당 함수로 지정됩니다. 🎜rrreee🎜 🎜block🎜 내에서 선언되면 변수의 범위는 해당 블록으로 지정됩니다. 다음은 블록 내 사용의 예입니다. 🎜rrreee🎜if 블록의 예: 🎜rrreee🎜반면, var는 블록으로 제한되지 않습니다. 🎜rrreee스테이징 데드 존🎜let 선언이 승격될 수 있지만 🎜 스테이징 데드 존이 생성됩니다🎜: 🎜rrreee🎜 스테이징 데드 존은 let 문. 또 다른 예: 🎜rrreee🎜 두 예에서 생성된 예외가 동일하다는 것을 알 수 있습니다. 즉, "일시적 데드존"의 출현을 증명하는 것입니다. 🎜

재할당 가능, 재선언 불가능

🎜let 🎜으로 선언된 모든 변수는 재선언될 수 없습니다🎜. 예외를 발생시키는 재선언의 예: 🎜rrreee🎜유효한 재할당의 예: 🎜rrreee🎜const🎜🎜 const 문은 다음을 준수하는 JavaScript에서 변수를 선언하는 데 사용됩니다. 규칙: 🎜

• 블록 범위에 속합니다.
• '일시적 데드존'이 적용됩니다.
• window에 전역 속성을 생성하지 않습니다.
• 🎜재할당할 수 없습니다🎜.
• 🎜다시 말할 수 없습니다🎜.

블록 범위

🎜const로 선언된 변수는 window에 전역 속성을 생성하지 않습니다. 🎜rrreee🎜함수 내부에서 선언되면 변수는 다음과 같습니다. 함수 범위: 🎜rrreee🎜 🎜block🎜 내에서 선언되면 변수 범위는 블록으로 지정됩니다. 블록 문의 예 {}: 🎜rrreee🎜if 블록의 예: 🎜rrreee

임시 데드 존

🎜const 선언은 승격될 수 있지만 🎜 임시 데드존에 진입합니다 🎜: 🎜rrreee<h3>재할당 불가능, 재선언 불가</h3>🎜<code>const로 선언된 모든 변수🎜 둘 다 다시 지정하거나 재할당할 수 없습니다🎜 . 재선언 시 발생하는 예외의 예: 🎜rrreee🎜재할당의 예: 🎜rrreee🎜Summary🎜🎜🎜var🎜🎜❌🎜🎜❌🎜🎜✅🎜🎜✅🎜🎜✅🎜🎜🎜let 🎜🎜✅🎜🎜✅🎜🎜❌ 🎜🎜✅🎜🎜❌🎜🎜🎜const🎜🎜✅🎜🎜✅🎜🎜❌🎜🎜❌🎜🎜 ❌🎜🎜🎜🎜🎜🎜 영문 원본 주소 : https://www .valentinog.com/blog/var/🎜🎜저자: Valentino🎜🎜🎜🎜🎜관련 무료 학습 권장사항: 🎜🎜🎜js 비디오 튜토리얼🎜🎜🎜🎜

	블록 범위	임시 데드존	전역 속성 생성	재할당 가능	재선언 가능

위 내용은 JS의 var, let 및 const 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!