理解ES6： 块作用域

这是Nicholas Zakas的新作，原文链接：https://github.com/nzakas/understandinges6/blob/master/manuscript/01-Block-Bindings.md

var声明与变量提升现象

这是前ES6时期var的问题，变量会被JS引擎处理成好像它们的声明被放在函数作用域（或者全局作用域）的顶端。

function getValue(condition) {

if (condition) {
var value = "blue";

// other code

return value;
} else {

// value exists here with a value of undefined

return null;
}

// value exists here with a value of undefined
}

经过JS引擎解释后，上面的代码等同于下面的写法：

function getValue(condition) {

var value;

if (condition) {
value = "blue";

// other code

return value;
} else {

return null;
}
}

这个现象以前讨论过很多次，我就不完全复述作者原文了。

区块级别的声明

let的声明

区块作用域的存在要符合两个要求：

在函数里；

在一对{}里。

用let关键字有以下几个作用：

只存在于定义区块内；

不会再被提升，见代码：

function getValue(condition) {

if (condition) {
let value = "blue";

// other code

return value;
} else {

// value doesn't exist here

return null;
}

// value doesn't exist here
}

不能重复使用同一个变量名；

但在不同区块里可以重复使用相同名声明变量，比如子区块，如：

var count = 30;

// Does not throw an error
if (condition) {

let count = 40;

// more code
}

常量的声明

它和let一样，也是区块作用域级别，并且不会被提升；

必须在声明时赋值；

不可以被修改，对象是特例，下面会说到；

也不能够重复使用相同的变量名，不论该名字是通过var还是let声明的。

常量对象

这个地方有点晦涩，作者解释的方法是，const关键字约束的是一个绑定本身，而不是被绑定的值，见代码：

const person = {
name: "Nicholas"
};

// works
person.name = "Greg";

// throws an error
person = {
name: "Greg"
};

这个现象很接近C++里的常量指针，指针指向的地址不能够改变，它指向一个对象后将永远指向它，但是这个对象本身的内容可以被修改。

临时无人区（TDZ）

TDZ这个概念只是在抽象层面存在的一个术语，用于方便解释一些JS引擎的行为，而且它不是ES规范里的内容，在JS引擎遇到var声明时，它的行为和ES3一样，提升变量，在遇到let或者const声明时，则是把变量先放到一个临时无人区，这样没有人能访问它，甚至是typeof，顺便提一下，在ES3里用typeof操作一个未定义变量是安全的，它会返回undefined。直到程序执行到该变量的声明，它的绑定才会被移出无人区，从此能够被访问到。

if (condition) {
console.log(typeof value);  // ReferenceError!
let value = "blue";
}

但TDZ有一个奇特的效果：

console.log(typeof value);     // "undefined"

if (condition) {
let value = "blue";
}

按说，在if区块之前不应该能够访问到value的。

循环里的区块绑定

ES3里，for循环有一个缺陷，如：

for (var i = 0; i < 10; i++) {
process(items[i]);
}

// i is still accessible here
console.log(i);                     // 10

这也是个讲过很多次的经典问题了，就不多说了。ES6里，这个问题可以用let解决

for (let i = 0; i < 10; i++) {
process(items[i]);
}

// i is not accessible here - throws an error
console.log(i);

循环里的函数

ES3里的问题如下示例代码：

var funcs = [];

for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i); });
}

funcs.forEach(function(func) {
func();     // outputs the number "10" ten times
});

这也是个经典的老问题了，我就不复述了。以前的解决办法是用闭包：

var funcs = [];

for (var i = 0; i < 10; i++) {
funcs.push((function(value) {
return function() {
console.log(value);
}
}(i)));
}

funcs.forEach(function(func) {
func();     // outputs 0, then 1, then 2, up to 9
});

但是在ES6里，用let就行了。

var funcs = [];

for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i);
});
}

funcs.forEach(function(func) {
func();     // outputs 0, then 1, then 2, up to 9
})

这个行为也适用于for...in循环和for...of循环。

var funcs = [],
object = {
a: true,
b: true,
c: true
};

for (let key in object) {
funcs.push(function() {
console.log(key);
});
}

funcs.forEach(function(func) {
func();     // outputs "a", then "b", then "c"
});

在普通的for循环里，你不能用const声明循环控制变量i，但是在for...in和for...of循环里，可以用const，效果和let一样：

var funcs = [],
object = {
a: true,
b: true,
c: true
};

// doesn't cause an error
for (const key in object) {
funcs.push(function() {
console.log(key);
});
}

funcs.forEach(function(func) {
func();     // outputs "a", then "b", then "c"
});

全局作用域的绑定

不同于var，let和const在全局作用域里声明变量时，它们不再会在window对象上创建新属性，所以它们不会重写window上面的内建对象，比如Date和Math。

作者的建议

使用const，其次是let，抛弃var。