浅谈JS中var、let、const变量定义的不同之处。

在JS开发中，有三种变量定义方式：var、let、const，他们是有很大区别的！

用var来声明变量会出现的问题：

• 1. 允许重复的变量声明：导致数据被覆盖；
• 2. 变量提升：怪异的数据访问、闭包问题；
• 3. 全局变量挂载到全局对象：全局对象成员污染问题；

例1：

 

 

用var声明的变量会默认被提升到当前作用域的顶部

例2：

 

 

For循环内的i变量当前所处的环境是全局作用域（函数局部作用域同理，只不过声明之后不绑定在window上）。

所以在最后点击事件触发的时候打印的i都是当前作用域上的同一个i，也即是最后的11

，这就产生了闭包，如下图：

 

ES6 中引入let 和 const，以及块级作用域来解决这个问题

什么是块级作用域

块级作用域：代码执行时遇到花括号，会创建一个块级作用域，花括号结束，销毁块级作用域

let在全局作用域下定义变量不会挂在到顶层对象window上

let声明的变量，不允许当前作用域范围内重复声明，在块级作用域中用let定义的变量，在作用域外不能访问

let不会有变量提升，因此，不能在定义let变量之前使用它

例1（对比）：

 

 

为什么会出现error，因为在let和const中引入了一个暂存该类变量的区域Temporal Dead Zone，简称TDZ。就是我们所说的临时死区。

在TDZ中的变量不能被访问，不然就会报错，只有在给该变量赋值的时候才会从死区内接触。

问题：let和const申明的变量真的不被提升吗？

let声明的变量实际上也会有提升，但是，提升后会将其放入到“暂时性死区”，如果访问的变量位于暂时性死区，则会报错：“Cannot access 'a' before initialization”。当代码运行到该变量的声明语句时，会将其从暂时性死区中移除。

例2（对比）：

 

 

轻松解决闭包问题

但是我们看到，此时for循环内（）中的let i并不在块级作用域内，讲道理应该最后点击时，打印的应该是这个全局上的i。这个i最后是11，可是从结果上来看却不是这样。

在全局上打印这个i：

 

 

说明这个for循环（）内的i并不是定义在全局作用域上的：

原因：

对于for循环（）内let定义的变量，做了特殊的处理。此变量相当于默认声明在后面块级作用域内

const

const 和let特性相同，唯一不同的是，const一般指的都是常量，常量的定义是不可改变的变量，所以用const 申明的变量是不可变的，且只能在定义是进行赋值。

值得注意的是const声明的常量是指存入内存的内存空间不可变。这也就意味着，如果存的是引用值，改变引用值内的属性，const所对应的值就会改变。

 

通常在开发中能写const就用const，不行就用let，这样出bug率小。