关于let、var和const

前言

let和const命令是ES6新增的命令，用来声明变量，这两个变量跟ES5中的var有许多不一样，同时let和const也有不同的地方。而且在ES6中也添加了块级做用域来解决ES5中做用域存在的问题。

做用域

官方解释是：“一段程序代码中所用到的名字并不老是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的做用域。”  

举个例子来形象的解析下上面的定义：

function fn () {
   // 声明变量
   var name = 'marry'
   
   // 定义内部函数
   function innerFn () {
       console.log(name) // 能够访问到name变量
   }
}
console.log(name) // undefined
复制代码

ES5做用域分为全局做用域和函数做用域。

1. 全局做用域

var a = 0;

if (true) {
  var b = 1;
}

console.log(b); // 输出1
复制代码

上面代码中，在全局中定义变量a，称为全局变量，在任何一个地方均可以访问到变量a。

2. 局部做用域

局部做用域也能够称之为函数做用域。

function fn () {
  var c = 2;
}

console.log(c); // c is not defined
复制代码

3. 做用域链

Function对象有一个仅供 JavaScript引擎存取的内部属性。

这个属性就是[[Scope]]。[[Scope]]包含了一个函数被建立的做用域中对象的集合。这个集合被称为函数的做用域链，它决定了哪些数据能被函数访问。 关于做用域链，局部做用域能够访问到全局做用域中的变量和方法，而全局做用域不能访问局部做用域的变量和方法。

var a = 0;

function fn () {
  var b = 1;
  console.log(a); // 输出 1
}

// 全局做用域并不能访问 fn 函数中定义的 b 变量
console.log(b); // b is not defined

fn();
复制代码

块级做用域

ES6新增块级做用域，块做用域由 { }包括，函数内部，if语句和 for语句里面的{ }也属于块做用域。

块级做用域的出现是为了解决ES5中做用域的问题：

1. 内层变量可能覆盖外层变量
2. 用来计数的循环变量泄露为全局变量。

var tmp = new Date();
function f() {
  console.log(tmp); // 想打印外层的时间做用域
  if (false) {
    var tmp = 'hello world'; // 这里声明的做用域为整个函数
  }
}
f(); // undefined

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]); // i应该为这次for循环使用的变量
}
console.log(i); // 5 全局范围均可以读到
复制代码

块级做用域

经过var声明的变量存在变量提高的特性

// var 的状况
console.log(foo); // 输出undefined
{ var foo = 2; }
console.log(foo) // 2  

// 运行时，真正运行的是下面的代码
var = foo
console.log(foo); // 输出undefined
{ foo = 2; }
console.log(foo) // 2  
复制代码

• JavaScript 引擎的工做方式是，先解析代码，获取全部被声明的变量，而后再一行一行地运行。这形成的结果，就是全部的变量的声明语句，都会被提高到代码的头部，这就叫作变量提高。
• 对于var命令来讲，JavaScript的单独的{}区块不构成单独的做用域。可是在JavaScript语言中，单独使用区块并不常见。

除此以外，在for循环中：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
复制代码

上面代码中，变量i是var命令声明的，在全局范围内都有效，因此全局只有一个变量i。

let 和 const

let 和 const 命令

ES6 新增了let命令，用来声明变量。它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效。

1. let在{}中声明的变量只在代码块中有效（造成块级做用域）

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1
复制代码

2. 不存在变量提高（let和const）

let命令所声明的变量必定要在声明后使用，不然报错。

// var 的状况
console.log(foo); // 输出undefined
var foo = 2;

// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;
复制代码

3. 重复声明报错（let和const）

let value = 2;
let value = 2; //Uncaught SyntaxError: Identifier 'value' has already been declared
复制代码

4. 变量不会挂在顶层对象下面（let和const）

浏览器环境顶层对象是: window； node环境顶层对象是: global

var a = 1;
// 若是在 Node环境，能够写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined
复制代码

const命令须要注意点

1. 一旦声明，必须立刻赋值

let p; var p1; // 不报错
const p3 = 'abc'
const p3; // 报错 没有赋值
复制代码

2. 一旦声明值就不能改变

const p = '不能改变';
p = '报错' //  Assignment to constant variable
复制代码

3. const本质是变量指针不能变

const foo = {};

// 为 foo 添加一个属性，能够成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另外一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
复制代码

const所说的一旦声明值就不能改变，实际上指的是：变量指向的那个内存地址所保存的数据不得改动

• 对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，所以等同于常量。
• 对于复合类型的数据（主要是对象和数组），变量指向的内存地址，地址保存的是一个指针，const只能保证指针是固定的(老是指向同一个地址),它内部的值是能够改变的(不要觉得const就安全了！)

暂时性死区

只要一进入当前做用域，所要使用的变量就已经存在了，可是不可获取，只有等到声明变量的那一行代码出现，才能够获取和使用该变量。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
复制代码

总之，在代码块内，使用let命令声明变量以前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

暂时性死区和不能变量提高的意义在于:

为了减小运行时错误，防止在变量声明前就使用这个变量，从而致使意料以外的行为。

本章内容总结

var 和 let、const的区别

1. 块级做用域
2. 不存在变量提高
3. 暂时性死区
4. 不可重复声明
5. let、const声明的全局变量不会挂在顶层对象下面

const须要注意点

1. let能够先声明稍后再赋值,而const在 声明以后必须立刻赋值，不然会报错。
2. const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据能够更改。

参考文章

• let 和 const 命令
• var和let/const的区别