【JS】深入理解ES6——块级作用域绑定

var声明及变量提升机制#

1
function getValue(something) {
2
  if (something) {
3
    var value = 'hello world';
4
    // ...
5
    result value;
6
  } else {
7
    return null;
8
  }
9
}

我们读着代码，可能会认为只有something为true(存在)时，value才会被声明，但事实上，在预编译阶段，JavaScritp引擎会将上面的getValue函数修成成下面这样

1
// 这里是全局作用域 window或global下
2
// getValue也会有函数声明提升，所以直接调用是能访问并正确执行getValue函数的
3
getValue();
4
function getValue(something) {
5
  // getValue的函数作用域顶层
6
  var value;
7
  if (something) {
8
    value = 'hello world';
9
    // ...
10
    result value;
11
  } else {
12
    // 此处可访问变量value，其值为undefined
13
    return null;
14
  }
15
  // 此处可访问变量value，其值为undefined
16
}

变量value的声明被提升至顶部。所以在注释处我们都可以在getValue函数内部访问到value。那ES6引入块级作用域就是来强化对变量声明周期的控制的。

块级声明#

块级声明用于声明在指定块的作用域之外无法访问的变量，块级作用域存在于：函数内部和块中（字符{ }之前的区域）

1
// 这里是全局作用域 window或global下
2
function getValue(something) {
3
  // getValue的函数作用域顶层
4
  if (something) {
5
    let value = 'hello world';
6
    const PI = 3.14;
7
    // ...
8
    result { value, PI };
9
  } else {
10
    // 变量value，PI在此处不存在
11
    return null;
12
  }
13
  // 变量value，PI在此处不存在
14
}

1
var name = 'fri';
2
if (true) {
3
  // 不会报错
4
  let name = 'fridolph';
5
  // ...
6
}

临时死区 (Temporal Dead Zone)#

JavaScript引擎在扫描代码时发现变量声明，要么将它们提升至作用域顶部（遇到var声明），要么将声明放到TDZ中（遇到let或const声明）

访问TDZ中的变量会触发运行时错误。只有执行过变量声明语句后，变量才会从TDZ中移出，然后才可正常访问。

总结#

• 块级作用域绑定的let和const为JavaScript引入了词法作用域（它们声明的变量不会提升），而且只可以在声明这些变量的代码块中使用。

• 在for-in和for-of循环中，let和const都会为每次迭代时创建新绑定（从而使循环体内创建的函数可以访问到相应迭代的值，而非最后一次迭代后的值）

注：在for循环中使用const声明可能引发错误，要尽量避免

• 使用块级作用域绑定的最佳实践是：默认使用const，只有在确实需要改变变量时才使用let