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

Question

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

以下代码sn-p解释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 中的等效代码是什么？

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

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

它建议将 IIFE 用于块作用域。

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

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

例子：

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

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

Answer 2

当前的最佳实践是编写 ES2015 (ES6) 并通过像 Babel 这样的预处理器运行您的代码。 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]();