1、变量范围
当我们在函数外部定义变量时,这些var变量属于全局范围。例如:
var counter;
在本例中,counter是一个全局变量。这意味着该counter变量可以被任何函数访问。
当我们使用关键字在函数内声明变量时var,变量的范围是局部的。例如:
function increase() {
var counter = 10;
}
// cannot access the counter variable here
在这个例子中,counter变量是increase()函数的局部变量。它不能在函数之外访问。
以下示例在循环内显示从 0 到 4 的四个数字,在循环外显示数字 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循环之后访问它。
以下示例使用let关键字而不是var关键字:
for (let i = 0; i < 5; i++) {
console.log("Inside the loop:", i);
}
console.log("Outside the loop:", i);
在这种情况下,代码在循环中显示了从 0 到 4 的四个数字和一个引用错误:
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...elseandfor语句中一样:
if(condition) {
// inside a block
}
for(...) {
// inside a block
}
2、创建全局属性
全局var变量作为属性添加到全局对象中。全局对象位于Web 浏览器和Node.js 上:windowglobal
var counter = 0;
console.log(window.counter); // 0
但是,let变量不会添加到全局对象中:
let counter = 0;
console.log(window.counter); // undefined
3、重新声明
var关键字允许我们重新声明变量而不会出现任何问题:
var counter = 10;
var counter;
console.log(counter); // 10
但是,如果我们用let关键字重新声明一个变量,我们会得到一个错误:
let counter = 10;
let counter; // error
4、时间死区
let 变量有时间死区,而 var 变量没有。为了理解时间死区,让我们检查一下 var 和 let 变量的生命周期,它们有两个步骤:创建和执行。
var 变量
在创建阶段,JavaScript 引擎将存储空间分配给 var 变量,并立即将它们初始化为 undefined。
在执行阶段,JavaScript 引擎将分配指定的值分配给 var 变量(如果有的话)。否则, var 变量保持未定义。
有关详细信息,请参阅执行上下文。
let变量
在创建阶段,JavaScript 引擎为 let 变量分配存储空间,但不初始化变量。引用未初始化的变量将导致 ReferenceError。
let 变量与 var 变量具有相同的执行阶段。
时间死区从块开始,直到处理了 let 变量声明。换句话说,它是在定义之前无法访问 let 变量的位置