js let var 区别|极客笔记

js let var 区别

在JavaScript中，我们经常会使用关键字let和var来声明变量。虽然它们在某些情况下可以互换使用，但它们之间确实存在一些重要的区别。本文将详细讨论let和var之间的区别，以便更好地理解在何时应该使用哪个关键字。

1. 作用域

let和var在作用域上有明显的区别。使用var声明的变量是函数作用域，而使用let声明的变量是块级作用域。

1.1 函数作用域

在使用var声明的变量中，其作用域被限制在声明它们的函数内部。如果在函数内声明一个var变量，那么这个变量在函数外是不可访问的。

function exampleFunc() {
    if (true) {
        var x = 10;
        console.log(x); // 输出 10
    }
    console.log(x); // 输出 10
}

exampleFunc();
console.log(x); // Uncaught ReferenceError: x is not defined

在上面的示例中，变量x使用var关键字声明，因此它的作用域限制在exampleFunc函数中。在函数外部无法访问x，因此最后一行会报错。

1.2 块级作用域

相比之下，使用let声明的变量是块级作用域，它们只在声明它们的代码块内部可见。

function exampleFunc() {
    if (true) {
        let y = 20;
        console.log(y); // 输出 20
    }
    console.log(y); // Uncaught ReferenceError: y is not defined
}

exampleFunc();

在这个示例中，变量y使用let关键字声明，因此它的作用域仅限于包含它的if代码块。尝试在代码块外部访问y会导致引用错误。

2. 变量提升

JavaScript中存在变量提升的机制，即在代码执行前会将变量声明提升到作用域顶部。使用var声明的变量会被提升，而使用let声明的变量不会被提升。

console.log(a); // 输出 undefined
var a = 5;

console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 10;

在上面的示例中，虽然变量a和b都在使用前被声明，但是var a会被提升至作用域顶部，因此第一行的输出是undefined。而let b不会被提升，因此在第三行使用b时会报错。

3. 重复声明

使用let在相同作用域内重复声明同一个变量会导致语法错误，而使用var则不会。

var c = 15;
var c = 20;
console.log(c); // 输出 20

let d = 25;
let d = 30; // Uncaught SyntaxError: Identifier 'd' has already been declared
console.log(d);

在这个示例中，重复声明var c是有效的，所以最终输出是20。而重复声明let d会导致语法错误，因此第三行会报错。

4. 全局声明

在全局作用域中声明的var变量会成为window对象的属性，而let声明的全局变量则不会。

var globalVar = 100;
let globalLet = 200;

console.log(window.globalVar); // 输出 100
console.log(window.globalLet); // 输出 undefined

在这个示例中，globalVar会成为window对象的一个属性，因此可以通过window.globalVar来访问。而globalLet不会成为window对象的属性，因此无法通过window.globalLet来访问。

5. 循环中的使用

在循环中使用var和let也会有不同的表现。使用var声明的变量会在循环结束后保留其值，而let声明的变量则会在每次迭代时重新声明。

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出 3 3 3
    }, 1000);
}

for (let j = 0; j < 3; j++) {
    setTimeout(function() {
        console.log(j); // 输出 0 1 2
    }, 1000);
}

在第一个循环中，使用var i声明的变量在setTimeout中输出时始终是3，因为循环结束后i的值为3。而在第二个循环中，使用let j声明的变量在每次迭代时会重新声明，因此会输出0、1、2。