如何为所有JavaScript数组代理[[set]]操作？

你之前尝试代理Array构造函数的set陷阱是方向错了——这个陷阱只会拦截对Array这个全局对象本身的属性赋值（比如Array.customProp = 'xxx'），根本不会作用于数组实例的索引或属性设置。要实现所有数组实例的[[set]]拦截，可以通过以下两种思路：

方案1：代理Array构造函数，拦截数组实例的创建 #

通过拦截Array构造函数的construct陷阱，让每次创建数组时都自动返回一个带有set拦截逻辑的Proxy实例。这样不管是用[]字面量、new Array()还是Array()创建的新数组，都会被自动代理：

// 先保存原始Array构造函数
const OriginalArray = Array;

// 代理Array构造函数
Array = new Proxy(OriginalArray, {
  construct(target, args) {
    // 创建原始数组实例
    const originalArr = new target(...args);
    // 返回包裹了set拦截的Proxy
    return new Proxy(originalArr, {
      set(targetArr, prop, val) {
        // 检查值是否有xyz自有属性，兼容val为null/undefined的情况
        if (val?.hasOwnProperty('xyz')) {
          console.log(`设置数组属性：${prop}`);
        }
        // 执行原始赋值操作
        targetArr[prop] = val;
        // 必须返回true表示赋值成功，严格模式下不返回会报错
        return true;
      }
    });
  }
});

// 测试
const obj = {xyz: 1};
const list = [];
list[0] = obj; // 会输出：设置数组属性：0
const anotherList = new Array(2);
anotherList[1] = {xyz: 2}; // 会输出：设置数组属性：1

局限性 #

• 只能拦截新创建的数组，代码执行前已经存在的数组不会被代理。
• 如果有其他绕过Array构造函数创建数组的场景（比如部分原生API返回的数组），可能无法被拦截。

方案2：修改Array.prototype方法补充拦截（不推荐） #

由于JavaScript无法直接修改数组的内部[[set]]方法，另一种思路是重写push、splice等会修改元素的原型方法，在这些方法里做检查。但这种方式无法覆盖直接通过索引赋值的场景（比如list[0] = obj），仅能作为补充：

// 重写push方法
const originalPush = Array.prototype.push;
Array.prototype.push = function(...args) {
  args.forEach((val, index) => {
    if (val?.hasOwnProperty('xyz')) {
      console.log(`push添加元素，位置：${this.length + index}`);
    }
  });
  return originalPush.call(this, ...args);
};

// 测试
const list = [];
list.push({xyz: 3}); // 输出：push添加元素，位置：0

这种方式无法处理直接索引赋值的情况，所以优先推荐方案1。

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