JavaScript var let区别

JavaScript var & let区别

var和let都是用来声明变量的关键字。

变量作用域

var声明的变量作用域是函数作用域或全局作用域，而let声明的变量作用域是块级作用域。

function test1() {var a = 1;if (true) {var a = 2;console.log(a);}console.log(a);
}
test1();
// 2
// 2

function test2() {let a = 1;if (true) {let a = 2;console.log(a);}console.log(a);
}
test2();
// 2
// 1

说明：test1函数中，if语句中的变量a覆盖了函数作用域中的变量a，因此2次输出都是2.

test2函数中，if语句中的a变了只在块级作用域中生效，因此第二次输出的a变量为1。

变量提升

var声明的变量会发生变量提升，即变量可以在声明前使用，而let声明的变量不会发生变量提升

function test1() {console.log(a);var a = 1;
}
test1();
// undefined

function test2() {console.log(a);let a = 1;
}
test2();
// Uncaught ReferenceError: Cannot access 'a' before initialization

说明：test1函数中，因为var声明的变量存在变量提升，即使变量a在声明前使用也不会不报错，输出undefined。

test2函数中，let声明的变量不会发生变量提升，因此在声明前使用会报错。

变量重复声明

同一作用域内，var声明的变量可以被重复声明，而let声明的变量不允许被重复声明。

function test1() {var a = 1;var a = 2;console.log(a);
}
test1();
// 2

function test2() {let a = 1;let a = 2; //提示错误console.log(a);
}

说明：test1函数中，变量a可以被重复声明，最终输出的值为2.

test2函数中，变量a不能重复声明，报错提示Identifier 'a' has already been declared*。

全局对象属性

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

var a = 1;
console.log(window.a); // 1let b = 2;
console.log(window.b); // undefined

说明：变量a被声明为全局变量，可以通过window对象访问。

变量b不会称为全局对象，因此会输出undefined。

for循环中的作用域

在循环语句中，用var声明的变量会存在作用域提升和共享的问题，而用let声明的变量则不存在这些问题。

function test1() {for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 100);}
}
test1();
// 5
// 5
// 5
// 5
// 5

function test2() {for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 100);}
}
test2();
// 0
// 1
// 2
// 3
// 4

说明：test1函数中，var声明的变量在函数作用域中会发生变量提升问题，最终会输出5个5.

test2函数中，let声明的变量不存在这些问题，会输出0~4。