淘先锋技术网

首页 1 2 3 4 5 6 7

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