es6 Let声明和块级作用域

let命令

基本用法

跟使用es5的var一样

BUT

不存在变量提升

var会存在变量提升现象，

let和const则不会有这种情况

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区 简称 TDZ

• 暂时性死区可以简单的理解为变量赋值之前的作用域区域，而在变量在使用之前被引用或使用都是错误的，不被允许的！

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

所有的变量都必须在赋值过后使用！即赋值表达式之后的作用域！

不允许重复申明

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

• 因为es6里把块作用域定义的很清楚，let声明又只在当前作用域里有效，所以，let的用法在es6变得更加清晰：

{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

• 那么let的作用就很大了，怎么说呢？在循环体里，如果你用var声明的变量来计数，那么结果一定会得到最后的那个值！为啥？可能很多人都没有注意到，其实循环体里的括号其实也代表着一个作用域：

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域，否则赋值了’abc’的i将会影响循环里的i，会引发值的错误。

• 那么有个问题就可以迎刃而解了，那就是循环里那个每次都输出终值的问题：

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

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

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

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。(上面这个例子是取自阮一峰的博客)

块级作用域

为什么需要块作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

var tmp = 123;

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]);
}
console.log(i); // 5

ES6 的块级作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

ES6 允许块级作用域的任意嵌套。

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

块级作用域不返回值，除非t是全局变量。

const

const声明一个只读的常量。

const除了以下两点与let不同外，其他特性均与let相同:

1. const一旦声明变量，就必须立即初始化，不能留到以后赋值。
2. 一旦声明，常量的值就不能改变。

本质

const限定的是赋值行为。

也就是说

const a = 1;
a = 2;//报错

const arr = [];
arr.push(1) //[1] 
//在声明引用型数据为常量时，const保存的是变量的指针，只要保证指针不变就不会保存。下面的行为就会报错

arr = [];//报错 因为是赋值行为。变量arr保存的指针改变了。

顶层对象属性与全局变量

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。

为了解决这个问题，es6引入的let 、const和class声明的全局变量不再属于顶层对象的属性。

而同时为了向下兼容，var和function声明的变量依然属于全局对象的属性

var a = 1;
window.a // 1

let b = 1;
window.b // undefined