var、 let、const 的区别
1、var是ES5提出的,let和const是ES6提出的。
2、let和var声明的是变量,声明之后可以更改,声明时可以不赋值; const声明的是常量,一旦声明必须赋值,并且声明后不能再修改;但如果声明的是复合类型数 据,可以修改其属性。
/*
const 在声明的同时 就必须要设置一个初始值
声明和赋值不能像var那样 分开
*/
// const name
// name = 'zsl' // 会报错
/*
注意: const所声名的成员不能被修改只是不允许在声明了过后
重新去指向一个新的内存地址,并不是不允许修改恒量中的属性成员
*/
const obj = {}
obj.name = 'zsl' // 这种情况并没有修改obj所指向的内存地址 只是修改了内存空间的数据 所以是被允许的
obj = {} // 如果是这样 则会改变obj的内存地址指向 会报错
3、var允许重复声明变量,后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量,会报错。
4、var声明的变量存在变量提升(将变量提升到当前作用域的顶部),即var声明的变量可以在声明之前调用,值为undefined。
let和const不存在变量提升。即它们所声明的变量一定要在声明后使用,否则报ReferenceError错。
5、var是函数作用域,let,const是块级作用域 注意:作用域 -> 某个成员能够起作用的范围;块 -> 指的是在代码中用花括号包裹起来的范围 在函数中声明了var,整个函数内都是有效的,比如说在for循环内定义的一个var变量
var elements = [{}, {}, {}]
// for (var i = 0; i < elements.length; i++) {
// elements[i].onClick = function() {
// console.log(i)
// }
// }
/*
打印出都是3的原因
这里的i 始终都是全局作用的i,在循环完之后,i就会被累加到了3
所以无论打印的是哪个元素,结果都是一样的
*/
// elements[1].onClick() // 3
// elements[2].onClick() // 3
// 使用闭包可以解决这个问题
// for (var i = 0; i < elements.length; i++) {
// elements[i].onClick = (function(i) {
// return function() {
// console.log(i)
// }
// })(i)
// }
// elements[1].onClick() // 1
// elements[2].onClick() // 2
使用let 块级作用域
for (let i = 0; i < elements.length; i++) {
elements[i].onClick = function() {
console.log(i)
}
}
elements[1].onClick() // 1
elements[2].onClick() // 2