ES6的变量定义深入解析

在es6中变量的定义方式有：var 、function 、let 、const 、import、 class。

let

使用let来定义变量，其在对应的块级作用域才能被访问到。

---

let定义变量只可以定义一次，但可以进行多次的取值与赋值。

---

1.基本用法：

输出的结果:

从输出的结果看，使用var定义的变量在块级作用域外可以被访问到（会有变量的提升）。使用let定义的变量不能在块级作用域外被访问到（不存在变量的提升），则出现报错。但是发现输出中居然出现 typeof 是什么鬼？它对b的检测返回的是undefined。这是因为typeof是对数据的类型检测，会在当前作用域寻找b，如果找不到则会继续向上寻找，直到找到window上，还是没有被找到，就会返回undefined作为这个变量的值。当使用typeof检测undefined的类型时自然就会返回undefined。

2.避免产生闭包：

闭包：是有权限访问其他函数内部变量或函数，既可以称为闭包。

接下来直接附上代码来进行分析

输出结果为：

我们可以发现在循环中使用var 定义的 i , 在最后的输出中答案是 10，而使用let 定义的 i，输出正是我们期待的值。因此，var声明的i在全局范围内都有效，每次循环都会覆盖旧值，产生闭包。let 声明的i只在本轮循环有效，所以每一次循环的i都是一个新的变量。

3.暂时性死区（临时死区）

使用let定义的变量，不能进行变量的提升。而且定义必须是要放在赋值之前。如果我们把变量的赋值放在定义之前，则会报错。这就造成了let定义变量的临时死区的出现。

4.屏蔽window

js中使用var定义的变量相当于在window上定义的一个属性，而使用es6的let和const定义的，则会屏蔽window，不会再window上定义一个与之对象的属性。

通过上面的代码，在浏览器控制台中可以看出a,b是否变成window上的一个属性?

输出：

可以看出，使用var定义的变量a变成了window的一个属性，而使用let定义的变量b，则在window上不存在，返回undefined。所以es6中定义的变量能够有效的屏蔽window，防止过多的变量定义在全局上，造成全局空间的污染。

大家下去可以尝试一下，const会屏蔽window么？这里直接告诉大家答案：可以。

const

const在日常使用中是用来定义常量的。如何确认是常量？通过一句话来判断。

---

只进行一次赋值操作，N次取值操作的变量，都可以看作是常量

---

这也是const在let定义变量后的一个选择。const可以防止已经被赋值的变量被再次赋值。

定义变量在开发中司空见惯的事情，在ES6中合理的使用let与const是能很大的避免在开发中出现不易察觉的错误。同时定义变量也是一个对安全机制的考验。

当要定义一个可以被多次取值和赋值操作的变量时，你会优先考虑用let还是const？我想只要是前端开发者都能说出是使用let。在这里这个答案是正确的，但是请你在回答这个答案的时候考录一下安全问题，再进行回答。

我会再考虑安全机制最小原则的前提下优先使用const，如果const不能满足我的条件，再下一步考虑let定义，甚至使用var都是合理的。

原创文章，转载请注明出去：https://www.jianshu.com/p/13c5edcba9a9