如何实现可自我更新的Array对象？支持数组下标访问

嘿，这个坑我之前踩过！你说得对，在JavaScript里不能直接给this赋值——this是一个只读的上下文引用，没法直接替换它指向的原对象。不过我们有两种靠谱的方式来实现你想要的“自我更新”效果，同时保留array[index]的访问方式：

方法一：直接修改现有数组的状态 #

既然不能替换this，那我们就修改原数组的内部状态，让它变成你想要的样子。比如要把长度从10改成20，只需要调整数组的length属性，顺便清空原有内容（如果需要的话）：

const array = new Array(10);
array.someMethod = function() {
  // 先清空数组现有内容（可选，根据需求调整）
  this.length = 0;
  // 设置新的长度，和new Array(20)效果一致
  this.length = 20;
};

// 测试验证
console.log(array.length); // 输出 10
array.someMethod();
console.log(array.length); // 输出 20
console.log(array[7]); // 输出 undefined，和新创建的Array(20)行为一致

这种方法的优势是简单直接，原数组的引用不会变——所有外部指向这个数组的变量都会同步看到更新后的状态，完全支持array[index]的读写操作。

方法二：用Proxy实现“对象替换”效果 #

如果你确实需要完全替换成一个全新的Array对象（而不是修改原数组），但又希望原来的array变量依然能访问到新对象，那可以用ES6的Proxy来包装数组：

// 初始化目标数组
let targetArray = new Array(10);

// 创建代理，拦截所有访问和修改操作
const array = new Proxy(targetArray, {
  get(target, prop) {
    // 当访问someMethod时，返回自定义的更新方法
    if (prop === 'someMethod') {
      return function() {
        // 替换目标数组为全新的Array(20)
        targetArray = new Array(20);
      };
    }
    // 其他属性/索引都转发到当前的targetArray
    return Reflect.get(targetArray, prop);
  },
  set(target, prop, value) {
    // 所有赋值操作也转发到当前的targetArray
    return Reflect.set(targetArray, prop, value);
  }
});

// 测试验证
console.log(array.length); // 输出 10
array.someMethod();
console.log(array.length); // 输出 20
array[2] = 'hello';
console.log(array[2]); // 输出 'hello'

这个方案里，代理会把所有对array的访问都转发到当前的targetArray。当你调用someMethod时，我们偷偷把targetArray换成了新的数组，后续所有操作都会指向这个新对象，而外部代码依然可以用原来的array变量和array[index]语法访问。

总结 #

• 如果只是需要调整数组的长度或内容，方法一足够简单高效；
• 如果必须替换成全新的Array对象，方法二的Proxy方案可以满足需求。

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