ES6(二: 变量作用域)

let命令

首先来看一个例子

if(true){
    var a =3;
}
console.log(a); // 3

if(true){
    let b =3;
}
console.log(b); // ReferenceError: b is not defined

这是babel编译结果

if (true) {
    var a = 3;
}
console.log(a); // 3

// babel 将块级声明成不同的变量名
if (true) {
    var _b = 3;
}
console.log(b); // ReferenceError: b is not defined

上面代码在代码块之中，分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个变量，结果 let 声
明的变量报错， var 声明的变量返回了正确的值。这表明， let 声明的变量只在它所在的代码块有效。
for 循环的计数器，也合适使用 let 命令。for(){}

再看一个比较经典的列子

var a =[];

for(var i =0;i<10;i++){
    a[i] = function(){
        console.log(i);
    }
}
// 不管你这里是2 3 4 5 6，输出都一样
a[3](); // 10
a[6](); // 10

对于这种情况，其实没let之前，我们也是可以处理的。大概样子就是这样

var a =[];

for(var i =0; i<10; i++){
    (function(i){ // 通过匿名函数自调
        a[i] = function(){
            console.log(i);
        }
    })(i)
}
a[3](); // 3
a[6](); // 6

上面代码，通过一次匿名函数自调，将i的值，做了一次保存操作，至于为什么，最后总结会说。

现在我们来看使用let

var a =[];

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

为什么会输出这样，我们来看下babel的编译结果

"use strict";

var a = [];

var _loop = function _loop(i) { // 使用一个函数包装
    a[i] = function () {
        console.log(i);
    };
};

for (var i = 0; i < 10; i++) {
    _loop(i);
}
a[3](); // 3
a[6](); // 6

上面代码，其实和我们处理方案一样，都是通过一个函数包装，保存了变量。

(1) 不存在变量提升

我们来看一个声明提前的。

console.log(a);
var a = 3; // undefined

上面代码其实是这样

var a;
console.log(a);
a = 3; // undefined

上面代码，是变量提升到作用域顶部，赋值留在本地。

我们来看let会怎么样

console.log(b); // ReferenceError: b is not defined
let b = 3;

babel官方的编译结果，发现其实还有有点看不懂，贴出来吧

"use strict";

console.log(b); // undefined
var b = 3;

这里就觉得有点坑。

(2) 暂时性死区

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

var tmp = 123;
if (true) {
    tmp = 'abc'; // ReferenceError: tmp is not defined
    let tmp;
}

上面代码中，存在全局变量 tmp，但是块级作用域内 let 又声明了一个局部变量 tmp，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 tmp 赋值会报错。

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

凡是在声明之前就使用这些变量，就会报错。

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

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

(3) 不允许重复声明

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

function f1() {
    let a = 10;
    var a = 11; // SyntaxError: Identifier 'a' has already been declared
}
// 报错
function f2() {
    let a = 10;
    let a = 1;
}

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

function func(arg) {
    let arg; // SyntaxError: Identifier 'arg' has already been declared
}
function func(arg) {
    {
        let arg; // 不报错
    }
}

(4) 块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
    console.log(tmp);
    if (false) {
        var tmp = "hello world";
    }
} 
f(); // undefined

上面代码实际是这样

var tmp = new Date();
function f() {
    var tmp;
    console.log(tmp);
    if (false) {
        tmp = "hello world";
    }
}
f(); // undefined

上面代码其实是一个常见的声明提前的面试题，这里涉及js的历史问题，在es6之前，只有函数有作用域，如果是函数里面，声明提前会将变量声明提前到函数顶部；若为全局，会提升到全局作用域顶部。

第二种场景，用来计数的循环变量泄露为全局变量

var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5

上面代码中，变量 i 只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6的块级作用域。

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

babel编译结果为：

"use strict";

function f1() {
    var n = 5;
    if (true) {
        var _n = 10; // 老套路，使用不一样的变量声明
    }
    console.log(n); // 5
}
f1();

上面的函数有两个代码块，都声明了变量 n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果使用 var 定义变量 n，最后输出的值就是 10。因为var定义，if是没作用域的。

ES6 允许块级作用域的任意嵌套和内层定义外层同名变量。

{{{{
    let insane = 'Hello World';
    {let insane = 'Hello World'}
}}}};

babel编译结果：

{
    {
        {
            {
                var insane = 'Hello World';
                {
                    var _insane = 'Hello World'; // 老套路了。
                }
            }
        }
    }
};

小结：

（1）在ES6之前，作用域分为两种，一种是全局作用域，一种是函数内部作用域，因为没块级作用域慨念，声明提前就是很容易污染全局变量的问题。
（2）块级作用域的出现，替代了匿名函数自调。保存函数作用域的写法。

(5) 块级作用域与函数声明

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

// 情况一
if (true) {
    function f() {}
}
// 情况二
try {
    function f() {}
} catch(e) {
}

但是，浏览器没有遵守这个规定，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。不过， ES5“严格模式”下还是会报错。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。
并且 ES6 规定，块级作用域之中，函数声明语句的行为类似于 let，在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }
(function () {
    if (false) {
    // 重复声明一次函数 f
    function f() { console.log('I am inside!'); }
    } 
    f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在 if 内声明的函数 f 会被提升到函数头部。

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 函数声明语句
{
    let a = 'secret';
    function f() {
        return a;
    }
}
// 函数表达式
{
    let a = 'secret';
    let f = function () {
        return a;
    };
}

babel编译结果

'use strict';

// 函数声明语句
{
    var f = function f() {
        return a;
    };

    var a = 'secret';
}
// 函数表达式
{
    var _a = 'secret';
    var _f = function _f() {
        return _a;
    };
}

另外，还有一个需要注意的地方。

ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

(5) const命令

const 声明一个只读的常量。一旦声明，常量的值就不能改变。类似java的final static。
const 声明的变量不得改变值，这意味着。

（1）const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
（2）const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。
（3）const 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
（4）const 声明的常量，也与 let 一样不可重复声明。
（5）对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。 const 命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

对最后一点举一个例子

const foo = {};
foo.prop = 123;
// 123
foo = {}; // TypeError: "foo" is read-only

上面代码中，常量 foo 储存的是一个地址，这个地址指向一个对象。
不可变的只是这个地址，即不能把 foo 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是另一个例子

const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错

上面代码中，常量 a 是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给 a，就会报错。
如果真的想将对象冻结，应该使用 Object.freeze 方法。

const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；// 严格模式时，该行会报错
foo.prop = 123;

上面代码中，常量 foo 指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。
除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
    Object.freeze(obj);
    Object.keys(obj).forEach( (key, value) => {
        if ( typeof obj[key] === 'object' ) {
            constantize( obj[key] );
        }
    });
};

ES5 只有两种声明变量的方法： var 命令和 function 命令。
ES6 除了添加 let 和 const 命令，后面章节还会提到，另外两种声明变量的方法： import 命令和 class 命令。所以， ES6 一共有 6 种声明变量的方法。