首先什么是作用域?作用域 - 某个成员能够起作用的范围。在 ES2015 之前,ES 只有两种作用域全局作用域和函数作用域,在ES2015之后:
• 全局作用域
• 函数作用域
• 块级作用域
- 块级作用域就是被{}所包围的区域
感受没有块级作用域会出现的问题:
应该执行9次,外层循环3次,内层循环3次
for(var i = 0;i < 3;i ++){
for(var i = 0;i < 3;i ++){
console.log(i);//实际只执行了3次
}
}//由于两层的i都处于同一个作用域内,相同的i会覆盖
// 当内层循环完,i已经是3了,i只执行了一次循环
let 关键字
通过let定义变量,形成块级作用域,让i不会发生覆盖,只在自己的块级作用域生效
// 通过let定义变量,形成块级作用域,让i不会发生覆盖,只在自己的块级作用域生效
for (var i = 0; i < 3; i++) {
for (let i = 0; i < 3; i++) {
console.log(i);//实际只执行了3次
}
}
//通过循环批量添加事件
var ele = [{},{},{}];
for(var i = 0;i < ele.length;i ++){
ele[i].onclick = function(){
console.log(i);
};
}
ele[0].onclick();//3
ele[1].onclick();//3
ele[2].onclick();//3
通过let定义变量,只能在块级作用域内部被调用
var ele = [{}, {}, {}];
//通过let定义变量,只能在块级作用域内部被调用
for (let i = 0; i < ele.length; i++) {
ele[i].onclick = function () {
console.log(i);
};
}
ele[0].onclick();//0
ele[1].onclick();//1
ele[2].onclick();//2
for循环中使用let定义i,在这个循环中有两层作用域,这样每一层都不会受影响
//循环 实际上有两层作用域
for(let i = 0;i < 3; i++){
let i = "a";
console.log(i);//3次a
}
//实际上 外层
let i = 0;
// 内层
if(i < 3){//i 进行一个判断,内层let形成块级作用域,让i有了新值,不受外层的影响
let i = a;
console.log(i);//a
}
// 外层 的 作用域 i 还是要进行自加
i ++;
let与var相比,let不会声明提升,所以let声明变量时,必须先声明再使用,注意声明和使用的书写顺序
//let不会声明提升
console.log(a);//undefined
var a = 1;
//let 不进行声明提升,变量必须先声明再使用
console.log(b);//报错
let b = 3;
const关键字 只读
// const 只读
const name1 = "li";
name1 = "zhang";//const不能让name1的地址指向其他地址
const 关键字声明变量时,必须同时赋初始值
//const 声明变量时,必须同时赋初始值
const name2;
name2 = "zhang";
// const
const obj = {};
obj.name = "li";//指向对象的指针并未修改,是可以的, 只是内部值发生改变
obj = {};//错误,obj被重新赋值,
- 在ES2015更新之后,尽量减少使用var ,主用const,配合let