ES6(二: 变量作用域)

前言

看过一句话：根本没中年危机的说法，只有年轻不努力罢了。

let命令

首先来看一个例子

if(true){    var a =3;}console.log(a); // 3if(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](); // 10a[6](); // 10

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

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

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

现在我们来看使用let

var a =[];for(let i =0; i<10; i++){    a[i] = function(){        console.log(i);    }}a[3](); // 3a[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](); // 3a[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 definedlet b = 3;

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

"use strict";console.log(b); // undefinedvar 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;// 123foo = {}; // 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 种声明变量的方法。