如何创建含可访问自身数组位置方法的JavaScript数组

你遇到的是典型的闭包陷阱——所有myMethod函数都共享同一个外部的index变量，当这些方法最终被调用时，index已经变成了遍历结束后的最终值，所以所有调用都会传入同一个错误的索引。

这里有两种简单的解决办法，帮你让每个方法捕获到定义时的index值：

方法一：用立即执行函数（IIFE）创建独立作用域 #

通过IIFE把当前的index值封装到独立的作用域里，让每个myMethod引用的是自己作用域内的变量：

var strings = ["one", "two", "three"];
var created = [];
var index = 0;

jQuery.each(strings, function(i, item) {
  if (/* 你的过滤条件 */) {
    // 用IIFE保存当前index的快照
    created.push((function(currentIndex) {
      return {
        myMethod: function() {
          callSomething(currentIndex);
        }
      };
    })(index));
    index++;
  }
});

方法二：用ES6的let创建块级作用域 #

如果你的环境支持ES6，用let会更简洁，因为let在循环的每次迭代中都会创建一个新的绑定：

const strings = ["one", "two", "three"];
const created = [];
let index = 0;

jQuery.each(strings, function(i, item) {
  if (/* 你的过滤条件 */) {
    // 用let声明当前索引，每个迭代都会生成独立的变量
    let currentIndex = index;
    created.push({
      myMethod: function() {
        callSomething(currentIndex);
      }
    });
    index++;
  }
});

原理说明 #

两种方法的核心都是让每个myMethod绑定到一个独立的变量上，而不是共享外部的index。这样当方法被调用时，它引用的是自己创建时那个时刻的索引值，而不是最终的index值。

内容的提问来源于stack exchange，提问作者Dom