既生 var 何生 let

原创

喵叔哟哟 2021-07-09 16:14:47 ©著作权

文章标签 杂文 js 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者喵叔哟哟的原创作品，请联系作者获取转载授权，否则将追究法律责任

说到 let 和 var 对于前端的同学一定都不陌生，let 是 ES6 提供的一个新的关键字，它和 var 一样都是用来声明变量的，那么你是否想过既生 var 何生 let ？下面就来说一说为什么要加入 let。

首先，在 js 中存在变量提升的问题，所谓的变量提升就是指变量的声明会提升到所有作用域的顶部，比如下面这样：

console.log(a);
var a="123";

上面这段代码经过 js 变量提升处理后就等价于下面这段代码：

var a="1";
var func=function(){
console.log(a);
var a="12345";
}
func();

虽然变量提升给我们带来了很大的方便，但是它会不知不觉的给开发人员带来一些难以察觉的问题，例如下面这段代码：

上面这段代码存在一个问题，在函数中调用的变量 a 并不是第一行所定义的 a 而是函数内部所定义的 a ，这是因为 js 的变量提升把函数中定义的 a 提升到了函数的开头，要解决这个问题我们就要使用 let 关键字，我们把代码中的 var 全都改为 let 后，再次运行代码，这时控制台就会显示 Identifier ‘a’ has already been declared 这个错误提示。这是因为在函数内部执行 let a 之前 a 位于暂时性死区中，因此这个时候使用变量 a 就会抛出异常。

其次， let 也可以很好的控制变量的作用域范围，我们来看一下下面的代码：

for (var i=0;i<10;i++){
  setTimeout(()=>{
  	console.log(i)
  },300);
}

上述代码运行后将会连续输出10次 10 ，这是因为在循环体中 var 变量声明的是一个全局变量，每次循环就是在给这个变量加 1，等到 setTimeout 函数执行回调的时候就这个变量就变成了 10 ，因此会输出 10次 10。同样我们利用 let 来改进一下上面的代码后将会一次输出0、1、2、3、4、5、6、7、8、9，这是因为 let 声明的变量是绑定在块级作用域上的，每次循环就会创建一个新的变量，也就是说每次 setTimeout 执行回调使用的是自己的变量 i 。