为什么要用let和const来替代var
要明白这一点,首先得了解作用域的概念。ES6之前javascript作用域的层级只在函数层面,而没有块级作用域的概念。也就是说,一个函数内在不包含另一个函数的情况下,其内部所有的变量都属于同一个作用域链。通过var声明的变量会提升上函数的最顶上。
function() {
var a = [1,2,3,4,5];
for (var i = 0; i < 10; i++) {
console.log(i);
}
}
经过预编译后等效于
function() {
var a;
var i;
a = [1,2,3,4,5];
for (i = 0; i < 10; i++) {
console.log(i)
}
}
观察下面的这段程序,其目的本是想针对于由数值组成的数组a,生成一个由方程组成的数组aFn,aFn中的方程与a中的数值一一对应,方程执行的结果为对应数值的平方。但是实际上数组aFn中每个方程的执行结果都是100。
var a = [0,1,2,3,4,5,6,7,8,9,10]
var aFn = [];
for (var i = 0; i < 10; i++) {
aFn[i] = function() {
return a[i]**2;
}
}
//执行aFn中函数
for (var j = 0; j < 10; j++) {
console.log(aFn[j]());
}
执行时输出结果:
100; (输出10次)
这是因为,函数自身的作用域是在函数执行前的那一刻产生的,因此,对于aFn中所有的函数来说,他们的i都是继承自同一个全局作用域。因此表现出来的就是全局作用域那个i,在执行的过程中,i的值已经是10了,所以输出都是100。而ES6引入的const和let定义的是块级作用域,这样每个循环相当于定义了属于自己的块级作用域,而对于aFn中的函数,其父级作用域对应的是每次循环时的块级作用域,循环过程中i值对于每个块级作用域是独立的。因此可以达到预期的效果,代码如下:
let a = [0,1,2,3,4,5,6,7,8,9,10];
let aFn = [];
for (let i = 0; i < 10; i++) {
aFn[i] = function() {
return i**2;
}
}
//执行aFn中函数
for (var j = 0; j < 10; j++) {
console.log(aFn[j]());
}
执行时输出结果:
0; 1; 4; 9; 16; 25; 36; 49; 64; 81