参考阮一峰老师的教程:http://es6.ruanyifeng.com/#docs/let。
一、先附图,此部分为阮老师教程内容。
下图是因为i只有一个,简化理解:最后调用a[i]的时候为输出的consol.log(i)中的指向同一个内存,均为10.
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
而如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。简化理解:a[i]和console.log(i)一一对应,这里的每个i都不一样。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
上面代码中,变量i是let声明的,当前的i只在轮循环有效,所以每一次循环的其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
二、函数部分
上代码:
var a = 1;
function func(a){
a = 2;
return a;
}
func(a);
console.log(a); //a为1;
在给一个做对比:
var a = 1;
function func(a){
console.log(a); //a为1
a = 2;
return a;
}
var c=func(a);
console.log(a); //a为1
console.log(c); //c为2
上面两个代码对比可发现函数内的a和函数外的a是两个a,作用域不同。
再上一个代码:
function func(a){
a.a = 2;
}
func(a);
console.log(a); //输出为{a:2}
接着上对比代码:
var a = {a:1};
function func(a){
console.log(a); //输出{a:1}
a.a = 2;
console.log(a); //输出{a:2}
}
func(a);
console.log(a); //输出{a:2}
三、for中的var与let补充
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i); //共输出三次‘abc’
}
for (var i = 0; i < 3; i++) {
let i = 'abc';
console.log(i); //共输出三次‘abc’
}
for (let i = 0; i < 3; i++) {
var i = 'abc';
console.log(i); //Uncaught SyntaxError: Identifier 'i' has already been declared
}
for (var i = 0; i < 3; i++) { //这里只有i=0被执行了
var i = 'abc';
console.log(i); //共输出一次‘abc’
}
以上所有代码都在chrome中调试,如有问题欢迎留言!