死磕JS：var、let、const 该怎么选？

众所周知，在 Javascript 中就有 3 个关键字可以声明变量，分别是 var，let，const.

var 在 ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在 ECMAScript6 及更晚的版本中使用。

那么这 3 个关键字 都有哪些异同点及注意事项吗？

我们从俩个方面看问题：

1、变量作用域在哪里？

• var 声明的变量，在函数作用域 中生效，所以只有在函数中声明的变量属于局部变量，在代码块中声明的依然为全局变量。

function test() {
  var message = 'hi';   // 函数体内声明，为局部变量，函数体外无法引用
  console.log(message)  // 'hi'
}
console.log(message)  // 报错

if(true){
  var message = 'hi';   // 代码块中声明，为全局变量，任何地方都可以引用
  console.log(message)  // 'hi'
}
console.log(message)  // 'hi'

• let 和 const 声明的变量，在块级作用域 中生效，所以只在当前代码块中引用。

function test(){
  let message = 'hi'; // 函数块中声明，函数体外无法引用
  const message1 = 'hello';  // 函数块中声明，函数体外无法引用
  console.log(message)  // 'hi'
  console.log(message1)  // 'hello'
}
console.log(message)  // 报错
console.log(message1)  // 报错

if(true){
  let message = 'hi';   // 代码块中声明，代码块外无法引用
  const message1 = 'hello';  // 代码块中声明，代码块外无法引用
  console.log(message)  // 'hi'
  console.log(message1)  // 'hello'
}
console.log(message)  // 报错
console.log(message1)  // 报错

因为 ECMAScript变量 属于松散类型，支持省略关键字直接定义的方式，

function test(){
  message = 'hi';
}
console.log(message);  // message = window.message = 'hi'

需要特别注意：

2、是否存在变量提升？

Javascript 里的变量是一个松散的类型，松散类型变量的特点是变量定义时候不需要指定变量的类型，变量在运行时候可以随便改变数据的类型，但是这种特性并不代表 Javascript 变量没有类型，当变量类型被确定后javascript的变量也是有类型的。

• var 声明的变量会自动提升到函数作用域顶部；

var message = 'hi';
function test(){
  console.log(message);   // undefined
  var message = 'hello';
}
test();  

是不是结果很令人费解，为什么打印的不是 'hi'，而是 undefined ?

其实就是因为代码会被解释为：

var message = 'hi';
function test(){
	var message;    // 自动提升到函数作用域顶部，先声明
  console.log(message);  
  message = 'hello';  // 再赋值；
}
test();   // 输出 undefined

代码解析后，函数的局部作用域下变量 message 被重新定义了，在预加载时候 message 的作用域范围也就被框定了，message 变量不再属于全局变量，而是属于函数作用域，只不过赋值操作是在运行期执行（这就是为什么 Javascript 语言在运行时候会改变变量的类型，因为赋值操作是在运行期进行的），所以使用 message 变量时候，message 变量在局部作用域里没有被赋值，只有栈区的标示名称，因此结果就是 undefined 了

• let 申明的变量不会提升。

• const 声明的变量，声明时必须同时初始化赋值，且不支持修改，所以也不会提升。

总结（最佳实践）

• 不使用 var
• const 优先，let 次之
• 在 window 上添加属性，直接使用 window['属性'] = 属性值