很早就想系统的学习ES6了，奈何资源太少，把阮一峰大大的ES6通读了一遍之后发现，没有一点感觉，是的，也许是自己的积累或者境界不够，真的一点感觉都没有，市面上可供学习参考的ES6的资料真的不多。之前一直盼望着《你不知道的JavaScript下卷》出中文版，听说到11月份，好吧。一次偶然，得知《高程》的作者也写了ES6的书，虽然中文版也没有，但是真的忍不了的，用我的渣英语慢慢读吧。
问在前面：
- 问：用
const申明的对象是可以修改的，对吗？
答：对。 - 用
let申明的全局变量和用var申明的全局变量是一样的吗？
答：不一样。
如果你都回答上了，并且知其然知其所以然，那你掌握的很好，不用往下看了。如果并不知道，那就一起慢慢回顾一下吧。
var###
相信大家已经对let，const有了一定的认识，也应该了解了块级作用域以及var并没有块级作用域。
var没有块级作用域，具体体现在两个方面，一个是在函数中，一个是在循环中。具体例子如下：
var foo = function(a){
if(a){
var text = 'hello'
return text
}else{
//这里也有text，其值为undefined
return null
}
//这里也有text，其值为undefined
}
其实我们的本意是希望如下代码：
var foo = function(a){
if(a){
var text = 'hello'
return text
}else{
//这里text未定义
return null
}
//这里text未定义
}
但是因为var没有块级作用域，并且存在变量提升，所以上述代码其实与下面的写法相同：
var foo = function(a){
var text;undefined
if(a){
text = 'hello'
return text
}else{
//这里也有text，其值为undefined
return null
}
//这里也有text，其值为undefined
}
这是在函数中，其实在循环中也一样，比如：
for (var i = 0; i < 10; i++) {
//做一些操作
}
//在外部，i依旧存在，并且会输出10
console.log(i); //10
很明显，这是不符合常理的，我们期望的是：
for (var i = 0; i < 10; i++) {
//做一些操作
}
//在外部，i未定义，报错
console.log(i); //ReferenceError
然而并做不到。再来举个例子，在循环中的函数，使用var，是更加糟糕，更加不符合常理的，比如：
var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
func(); // 输出10,10次
});
其实我们期待的是，输出0-9，但是事与愿违，输出了10次10，为什么？因为for循环中的每一次迭代都共享着用var申明的i，也就是说，这里的i不是分别在单独的作用域里，而是在同一个作用域里，是一个值，而不是十个，所以，一改全改，最终变成输出10个10。
如何解决这个问题呢？
在ES5中，我们想到了用立即执行函数（IIFE），把每一个i的作用域分开。具体代码如下：
var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push((function(value) {
return function() {
console.log(value);
}
}(i)));
}
funcs.forEach(function(func) {
func(); //输出0-9
});
解决了，但是显得太臃肿而且难以理解是不是？是的，一眼看过去很难看清楚这个函数到底想表达什么。但是，如果我们一开始就使用let代替var，这个世界就变得简单而清爽了：
var funcs = [];
for (let i = 0; i < 10; i++) {
funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
func(); // 输出0-9
});
符合逻辑，并且代码清爽。完美！这就是let的魅力。下面让我们来深入学习let。
let###
let和var差不多，只不过申明的变量有块级作用域，并且不会变量提升。什么意思呢，就是说，let声明的变量只存在于声明它的{}内部，或者循环体内部，或者函数内部，外部是不存在的。因为没有变量提升，所以有暂时性死区。
暂时性死区
这个概念我觉得是相对于var来说的，因为var有变量提升，所以先使用后申明是不会报错的，而是undefined，具体例子如下：
console.log(value);//undefined
var value = 10;
console.log(value);//10
其实这个就等于：
var value;
console.log(value);//undefined
value = 10;
console.log(value);//10
说起变量提升，在这里想多说一点。函数用function (){····}这样的方式，也有提升，而且是在变量提升之前，也就是说，提升的优先级比变量提升高，并且同名函数，后者会覆盖前者。也就是说：
foo();//b
function foo(){
console.log('a')
}
function foo(){
console.log('b')
}
扯远了，现在回到let的暂时性死区，和var不同，请看下面的例子：
console.log(value);//报错，ReferenceError
let value = 10;
console.log(value);
因为没有变量提升，所以只能先声明，后使用。
还要一些小细节，在同一作用域中var申明变量是可以重复申明的，并且后者覆盖前者：
var a = 10;
var a = 20;
console.log(a)//20
而在let中，这样会报错：
let a = 10;
let a = 20;//报错，语法错误，a已经申明过了。
console.log(a)
当然，这样也不行：
var a = 10;
let a = 20;//报错，语法错误，a已经申明过了。
console.log(a)
不同作用域，是可以的：
var a = 10;
function foo(){
let a = 20;//合法
}
回到最初提出的问题之一，全局作用域下，let和var申明的变量的不同之处
首先，var大家都了解，全局申明的变量在浏览器中就是window的属性，比如：
var a = 10;
window.a//10
给个最直观的例子：
let a = 10;
window.a//报错，a未定义
明显可以看出，这是不同的。下面，我们来深入一点，用var申明全局变量并没有想象中的那么好，比如：
var RegExp = 10;
window.RegExp//10
是不是贼恐怖？把内置对象给干掉了，如此危险的操作，肯定是要避免的。用let就可以避免了：
let RegExp = 10;
window.RegExp//function RegExp() { [native code] }
console.log(RegExp )//10
为什么会这样？因为用var申明的全局变量会当做window对象的属性，而let申明的全局变量，只是一个变量，不会当做window对象的属性。let就说的差不多了，下面说下const。
const###
其实const和let用法，包括需要注意的一些细节都一样比如没有变量提升，声明全局变量，块级作用域。但是还是有一些地方是不一样的，最大的一个不同点就是，const申明的变量，是不可变的，变了就报错，具体例子如下：
const a =10;
a = 20;//报错，语法错误，不能改变一个不变的值
当然，如果你以为这就是const的全部，那就不太好了，回到开头提出的问题，如果用const申明的是一个对象呢？
const a = {
value:10
}
a.value = 20;
a;//a{value:20}
修改了，没有报错。可能你有些动摇了，那么看下一个例子：
const a = {
value:10
}
a = {
value:20//报错，语法错误，不能改变一个不变的值
}
结论，const只会锁定变量的地址，而不会锁定变量的属性，这个和Object.freeze()，还是有很大的区别的。
总结###
-
var没有想象中的那么好，尽量使用let，const代替。 -
var申明的全局变量，除非你真的是想给window对象加属性，不然就用let，const代替。 -
let，const没有变量提升，注意暂时性死区。 -
const并不是真正的锁定变量的所有，而只是锁定这个变量的地址而已，所以这个变量的属性是可以修改的。 - 尽量都是用
const，除非你确定你申明的是一个变量（会变的值）。
网友评论