JavaScript系列文章：从let和const谈起.docVIP

JavaScript系列文章：从let和const谈起 注册博客园账号也有好些年了，有事没事经常来逛逛，感觉博客园的同学们一直都很活跃，相比国内其他社区来讲，这里的技术氛围很浓，非常适合学习和交流，所以博主我也决定在这里驻扎了，在这里，博主希望能坚持写一些JavaScript方面的文章，并和大家一起交流和探讨。 最近接触到ES6的一些相关新特性，想借let和const两个命令谈谈JavaScript在变量方面的改进。 由于let和const有很多相似之处，我们就先说一说let吧。 1. let添加了块级作用域 我们知道，JavaScript是没有块级作用域的，如果在块内使用var声明一个变量，它在代码块外面仍旧是可见的： 复制代码 if (true) { var foo = 3; } console.log(foo); // 3 for (var i = 0; i 9; i++) { var j = i; } console.log(i); // 9 console.log(j); // 8 复制代码 可以看到，在上面代码中，我们虽然是在块内声明的变量，但代码块执行完毕后，依然可以访问到相应的变量，说明JavaScript中没有块级作用域的。 而ES6规范给开发者带来了块级作用域，如果把var换成let命令，我们就可以获得一个块级变量： 复制代码 if (true) { let foo = 3; } console.log(foo); // Uncaught ReferenceError for (let i = 0; i 9; i++) { let j = i; } console.log(i); // Uncaught ReferenceError console.log(j); // Uncaught ReferenceError 复制代码 从上面代码可以看出，块内声明的变量，块外是不可见的，如果试图引用一个块内用let声明的变量，就会引发一个异常。 2. let约束了变量提升 在JavaScript中，变量提升是很常见的，例如下面这段代码： function hoistVariable() { console.log(foo:, foo); // foo: undefined var foo = 3; } hoistVariable(); 在代码正式执行之前，编译器将会对代码进行预编译分析阶段，在这个阶段，当前作用域中的变量和函数，将被提升到作用域的顶部。（注：目前的JavaScript引擎大都对源代码进行了编译处理，并且预编译和提升是抽象出来的概念。） 经过预编译之后的代码逻辑如下所示： 复制代码 function hoistVariable() { var foo; console.log(foo:, foo); // foo: undefined foo = 3; } hoistVariable(); 复制代码 ES6中的let命令规范了变量的声明，约束了变量提升，也就是说，我们必须先声明，然后才可以使用，下面者段代码将会报错： function nonHoistingFunc() { console.log(foo:, foo); // Uncaught ReferenceError let foo = 3; } nonHoistingFunc(); 正确的使用方式是，永远将变量声明置于当前作用域顶部： function nonHoistingFunc() { let foo = 3; console.log(foo:, foo); // 3 } nonHoistingFunc(); 需要注意的是，不管是var还是let，预编译过程中，都发生了变量提升，但与var不同的是，ES6对let进行了约束，其规定，在真正的词法变量声明之前，以任何方式访问let变量都是不允许的，所以从开发人员角度来看，let禁止了变量提升这一行为。 关于这一点，大家可以参考ES6规范中“let和const变量的声明”。 3. let有暂时性死区 只要在块内存在let命令，那么这个变量就绑定到了当前块作用域，不再受外部变量的影响，下面代码将会引发一个错误： var foo = 3; if (true) { foo = 5; // Uncaught ReferenceError let foo; } ES6规定如果块内存在let命令，那么这个块就会成为一个封闭的作用域，并要求let变量先声明才能使用，如果在声明之前就开始使用，它并不会引用外部的变量。 如果把这里的