如何在JavaScript Array原型上实现反向迭代的entriesReverse方法

核心问题说明 #

你遇到的this指向问题有两个核心诱因：

• 不能用箭头函数定义原型方法：箭头函数没有独立this绑定，会继承外层作用域的this，无法指向调用方法的数组实例
• 迭代器内部执行上下文变化：Symbol.iterator方法执行时的this指向迭代器对象，而非原数组，直接在该作用域内用this拿不到数组实例

完整实现代码 #

// 必须用普通函数声明原型方法，保证this指向调用的数组实例
Array.prototype.entriesReverse = function() {
  // 提前捕获当前数组实例，后续闭包直接引用，完全规避this指向问题
  const targetArray = this;
  return {
    [Symbol.iterator]() {
      let index = targetArray.length;
      return {
        next() {
          index--;
          if (index >= 0) {
            return {
              value: [index, targetArray[index]],
              done: false
            }
          }
          return { done: true }
        }
      }
    }
  }
}

使用示例 #

和原生entries()用法完全一致，仅迭代顺序倒序：

const testArr = ['苹果', '香蕉', '橙子'];
for (const [index, value] of testArr.entriesReverse()) {
  console.log(index, value);
}
// 输出：
// 2 橙子
// 1 香蕉
// 0 苹果

该实现和原生entries()行为完全对齐，支持稀疏数组、类数组等场景，符合JS迭代器协议规范。

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