JavaScript var 和 let 的不同与区别

JavaScript var 和 let 的不同与区别

在本教程中，您将了解 var 和 let 关键字之间的区别。

变量作用域

当您在函数外部使用 var 定义变量时，它们属于全局作用域。例如：

var counter;

在这个例子中，counter 是一个全局变量。这意味着任何函数都可以访问 counter 变量。

当您使用 var 关键字在函数内部声明变量时，变量的作用域是局部的。例如：

function increase() {
    var counter = 10;
}
// 不能在这里访问 counter 变量

在此示例中，counter 变量是 increase() 函数的局部变量。它不能在函数的外部访问。

下面的示例在循环内显示从 0 到 4 的 5 个数字，在循环外显示数字 5。

for (var i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);

Inside the loop: 0 
Inside the loop: 1 
Inside the loop: 2 
Inside the loop: 3 
Inside the loop: 4 
Outside the loop: 5

在这个例子中，i 变量是一个全局变量。因此，它可以从循环内部和 for 循环后访问 i 变量。

以下示例使用 let 关键字而不是 var 关键字：

for (let i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);

在这种情况下，代码在一个循环显示从 0 到 4 的 5 个数字和一个引用错误：

Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Inside the loop: 3
Inside the loop: 4

Uncaught ReferenceError: i is not defined

由于此示例使用 let 关键字，因此变量 i 是在块级作用域的。这意味着变量 i 仅在 for 循环块内可以访问。

在 JavaScript ，一个块级作用域由一对大括号 {} 创建，就像在 if...else 和 for语句一样：

if(condition) {
   // inside a block
}

for(...) {
  // inside a block
}

创建全局属性

全局 var 变量作为属性添加到全局对象。在Web 浏览器全局对象 window ，而 Node.JS 是 global：

var counter = 0;
console.log(window.counter); //  0

但是，let 变量不会添加到全局对象中：

let counter = 0;
console.log(window.counter); // undefined

var 关键字允许随时地重新声明变量：

var counter = 10;
var counter;
console.log(counter); // 10

但是，如果你用 let 关键字重新声明一个变量，你会得到一个错误：

let counter = 10;
let counter; // error

暂时性死区  TDZ

let 变量有暂时性死区而 var 变量没有。为了理解暂时性死区，让我们看看 var  和 let 变量的生命周期，它有两个步骤：创建和执行。

var 变量

• 在创建阶段，JavaScript 引擎为 var 变量分配存储空间，并立即将其初始化为undefined。
• 在执行阶段，JavaScript 引擎会为  var  变量分配指定的值（如果有的话）。否则，var 变量保持未定义状态。

相关的详细信息，请参阅执行上下文。

let 变量

• 在创建阶段，JavaScript 引擎为 let 变量分配存储空间，但不初始化变量。引用未初始化的变量将导致 ReferenceError.
• let 变量与 var 变量具有相同的执行阶段。

暂时性死区从块的开始，直到处理完 let 变量声明。换句话说，您无法在定义 let 变量之前访问变量的位置。

在本教程中，您了解了 var 关键字和 let 关键字之间的区别。