ES6-01 块级绑定

ES6学习笔记

1.块级绑定

在类C语言中变量是在声明的地方创建。

在JS中变量实际创建位置取决于你如何声明它。

es6提供了控制变量作用域的块级作用域。

1.1 var声明与变量提升

var声明变量，函数内声明提升到函数顶部，函数外声明提升到全局作用域顶部，即所谓的变量提升。

function getValue(condition) {
    if (condition) {
        var value = "blue";
        // 其他代码
        return value;
    } else {
      // value 在此处可访问，值为 undefined
           return null;
    }
    // value 在此处可访问，值为 undefined
}

等价于：

function getValue(condition) {
    var value;// 变量提升
    if (condition) {
      value = "blue";
       // 其他代码
      return value;
    } else {
      return null;
    }
}

1.2块级声明

块级作用域又称词法作用域，声明的变量在指定块的作用域内可访问，作用域外不可访问。

创建块级作用域：在函数内部或代码块内部

• let变量声明

let声明的语法等同于var声明，但会将变量的作用域限制在当前代码块中。

• const常量声明

const 声明的变量被认为是常量，它的值被设置后不能修改。

const变量需要在声明时初始化，否则会抛出错误。

• 禁止重复声明

let 不能在同一作用域内重复声明一个已有标识符，否则会抛出错误。

const 不能在同一作用域内重复声明一个已有标识符，否则会抛出错误。

• 对比const与let

都是块级声明，即在声明语句块外无法被访问，声明不会被提升。

使用const或let或var声明的变量，在同一个作用域（全局或是函数作用域）中都不能使用let或const进行重复声明。

let与const最大区别：对const声明的变量赋值会抛出错误。

• 使用const声明对象

const 声明会阻止对于变量绑定与变量自身值的修改，但并不会阻止对变量成员的修改。

• 暂时性死区

let或const声明的变量在声明前是不能访问。

if (condition) {
  console.log(typeof value); // 引用错误
  let value = "blue"; 
}
// value位于被JS 社区称为暂时性死区（ temporal dead zone ， TDZ ）的区域内。

JS引擎检查变量声明时，对var声明提升到函数或全局作用域的顶部，而对let或const声明将放在暂时性死区内。

console.log(typeof value); // "undefined"
// 此时value并没有在暂时性死区内，因为value定义在代码块外部，并没有绑定value变量。
if (condition) {
    let value = "blue";
}

块级作用域独特表现：暂时性死区、循环中的使用。

• 循环中的块级绑定

for (var i = 0; i < 10; i++) {
  process(items[i]);
}
// i 在此处仍然可被访问
console.log(i); // 10

for (let i = 0; i < 10; i++) {
  process(items[i]);
}
// i 在此处不可访问，抛出错误
console.log(i);

变量i只在for循环内部可用。

• 循环内的函数

循环内创建函数问题：

var funcs = [];
for (var i = 0; i < 10; i++) {
      funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
  func(); // 输出数值 "10" 十次,预期值是0-9
});

预期值是0到9的数值，实际输出数值10共十次。
原因：变量 i 在循环的每次迭代中都被共享了，那么循环内创建的函数都引用同一变量。

解决方案：

在循环内使用立即调用函数表达式（IIFEs），以便在每次迭代中强制创建变量的一个新副本。

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 声明

在每次迭代中，都会创建一个新的同名变量并对其进行初始化。

for-in、for-of循环同样适用。

var funcs = [];
for (let i = 0; i < 10; i++) {
    funcs.push(function () {
        console.log(i);
    });
}
funcs.forEach(function (func) {
    func(); // 从 0 到 9 依次输出
})

let 声明在循环内部的行为是在规范中特别定义的，而与不提升变量声明的特征没有必然联系。

• 循环内的常量声明

循环方式的不同而有不同行为。

var funcs = [];
// 在一次迭代后抛出错误
for (const i = 0; i < 10; i++) {
    funcs.push(function () {
        console.log(i);
    });
}
// i++ 执行时，一个错误会被抛出，因为该语句试图更改常量的值。

const 变量在 for-in 或 for-of 循环中使用时，与 let 变量效果相同。

唯一的区别是 key 的值在循环内不能被更改。

const 能够在 for-in 与 for-of 循环内工作，是因为循环为每次迭代创建了一个新的变量绑定，而不是试图去修改已绑定的变量的值。

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };
// 不会导致错误
for (const key in object) {
    funcs.push(function () {
        console.log(key);
    });
}
funcs.forEach(function (func) {
    func(); // 依次输出 "a"、 "b"、 "c"
});

• 全局块级绑定

在全局作用域上的表现上let 与 const 不同于 var，var会创建一个新的全局变量，成为全局对象(浏览器中的window，node中的global)的一个属性。
var 可能会无意覆盖一个已有的全局属性。

// 在浏览器中
var RegExp = "Hello!";
console.log(window.RegExp); // "Hello!"
var ncz = "Hi!";
console.log(window.ncz); // "Hi!"

在全局作用域上使用 let 或 const ，会创建新的绑定，但不会有任何属性被添加到全局对象上。
不能使用 let 或 const 来覆盖一个全局变量，你只能将其屏蔽。全局作用域没有被污染。

// 在浏览器中
let RegExp = "Hello!";
console.log(RegExp); // "Hello!"
console.log(window.RegExp === RegExp); // false
const ncz = "Hi!";
console.log(ncz); // "Hi!"
console.log("ncz" in window); // false

若想让代码能从全局对象中被访问，你仍然需要使用 var 。在浏览器中跨越帧或窗口去访问代码时，这种做法非常普遍。

• 块级绑定最佳实践

变量声明方式是：默认情况下应当使用 let 而不是 var。
一种替代方案变得更为流行，那就是在默认情况下使用 const 、并且只在知道变量值需要被更改的情况下才使用 let 。
其理论依据是大部分变量在初始化之后都不应当被修改，因为预期外的改动是 bug 的源头之一。

• 总结

let 与 const 块级绑定将词法作用域引入了 JS 。这两种声明方式都不会进行提升，并且只会在声明它们的代码块内部存在。由于变量能够在必要位置被准确声明，其表现更加接近其他语言，并且能减少无心错误的产生。作为一个副作用，你不能在变量声明位置之前访问它们，即便使用的是 typeof 这样的安全运算符。由于块级绑定存在暂时性死区（ TDZ ），试图在声明位置之前访问它就会导致错误。let 与 const 的表现在很多情况下都相似于 var ，然而在循环中就不是这样。在 for-in与 for-of 循环中， let 与 const 都能在每一次迭代时创建一个新的绑定，这意味着在循环体内创建的函数可以使用当前迭代所绑定的循环变量值（而不是像使用 var 那样，统一使用循环结束时的变量值）。这一点在 for 循环中使用 let 声明时也成立，不过在 for 循
环中使用 const 声明则会导致错误。块级绑定当前的最佳实践就是：在默认情况下使用 const ，而只在你知道变量值需要被更改的情况下才使用 let 。这在代码中能确保基本层次的不可变性，有助于防止某些类型的错
误。