如何在 ECMAScript 5 中拥有块作用域

Question

当我阅读有关 ES 6 特性的内容时，我发现 let 用于创建块作用域。 link 对 ES6 特性和 let 语句有很好的解释。那么开发人员如何在旧版本的 ECMAScript 中创建这个 block scopes，比如 ES5。

下面的代码片段解释了let

var es = [];
for (var i = 0; i < 10; i++) {
  let c = i;
  es[i] = function () {
    console.log("Upcoming edition of ECMAScript is ES" + c);
  };
}
es[6](); // Upcoming edition of ECMAScript is ES6

ES5 中的等效代码是什么？

上面没有 let 的代码片段，为 i 输出 10，因为它在全局范围内。

var es = [];
for (var i = 0; i < 10; i++) {
  es[i] = function () {
    console.log("Upcoming edition of ECMAScript is ES" + i);
  };
}
es[6](); // Upcoming edition of ECMAScript is ES10

这个 link 在 ES5 中有 ES6 等价物，它建议对块作用域使用 IIFE。但是我不确定，在当前场景下如何使用IIFE。

非常感谢任何帮助。

提前致谢。

Answer 1

当前的最佳实践是通过像 Babel 这样的预处理器编写 ES2015 (ES6) 和运行你的代码。 Babel 采用了在旧版浏览器上支持 let 的实现细节。

如果你想直接使用ES5，你可以create an anonymous function，即在每次迭代中传递i的值。

var es = [];
for (var i = 0; i < 10; i++) {
  (function (i) {
    es[i] = function () {
      console.log("Upcoming edition of ECMAScript is ES" + i);
    };
  })(i);
}
es[6]();

Answer 2

it recommends to use IIFE for block scopes.

在 ES5 中，只调用一个函数就会创建一个新的作用域。所以 "obviously"，如果你想创建一个新的范围（每次迭代），你必须调用一个函数。这就是 IIFE 所做的：它创建一个新函数并立即调用它。

任何块作用域的变量（例如通过 let）将成为函数的参数，初始值将作为参数传递。

示例：

for (var i = 0; i < 10; i++) {
  (function(c) {
    es[i] = function () {
      console.log("Upcoming edition of ECMAScript is ES" + c);
    };
  }(i));
}

这当然是简化的，在某些情况下可能需要更详细的解决方案。

如何在 ECMAScript 5 中拥有块作用域

How to have block scopes in ECMAScript 5

javascript

ecmascript-5

angularjs

ecmascript-6