JavaScript之为什么要用let代替var

javascript中用 var 声明变量，存在以下问题：

声明的变量为全局变量(被誉为JS最大设计缺陷之一)：


var a = 123;

console.log(window.a); // 123

这造成了在开发大型项目或引入三方库时，很容易覆盖已有变量。

变量提升：


console.log(a); // undefined

var a = 1;

这种奇异的行为会让正常思维的人很困惑。

变量可被重复声明：


var a = 1;

console.log(a); // 1

var a = 2;

console.log(a); // 2

没有「块级作用域」的概念：


if (true) {

  var a = 1;

}

console.log(a); // 1


for (var i = 0; i < 1; i++) {

  var a = 5;

  // ...

}

console.log(i); // 1

console.log(a); // 5

没有块级作用域，既会污染全局变量，也使循环中的异步代码不能如意执行：

for (var i = 0; i < 3; i++) {
  console.log('for: ' + i);

  setTimeout(() => {
    console.log('setTimeout: ' + i);
  })
}
// for: 0
// for: 1
// for: 2
// ③ setTimeout: 3

说到了let 就顺带再说下const

1、const声明一个只读的常量。一旦声明，常量的值就不能改变。

2、const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

3、const的作用域与let命令相同：只在声明所在的块级作用域内有效。

4、const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

5、const声明的常量，也与let一样不可重复声明。

6、对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

7、如果真的想将对象冻结，应该使用Object.freeze方法。

8、ES5只有两种声明变量的方法：var命令和function命令。ES6除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6一共有6种声明变量的方法。

9、顶层对象，在浏览器环境指的是window对象，在Node指的是global对象。ES5之中，顶层对象的属性与全局变量是等价的。

10、ES6中，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。

JavaScript之为什么要用let代替var

猜你喜欢