能否为普通JavaScript Array对象实现addEventListener类功能？

当然可以实现这个需求，下面提供三种实用的方案，适配不同的开发场景：

方法1：修改Array原型（谨慎使用） #

直接扩展原生Array的原型，让所有数组都具备事件监听能力，但要注意原型污染问题，可能影响其他依赖原生数组的代码。

// 保存原生push方法，避免覆盖后丢失原功能
const originalPush = Array.prototype.push;

// 重写push方法，添加事件触发逻辑
Array.prototype.push = function(...items) {
  const result = originalPush.apply(this, items);
  // 触发push事件回调（如果存在）
  if (this._eventListeners?.push) {
    items.forEach(item => {
      this._eventListeners.push.forEach(callback => callback(item));
    });
  }
  return result;
};

// 给Array原型添加事件监听方法
Array.prototype.addEventListener = function(eventName, callback) {
  if (!this._eventListeners) this._eventListeners = {};
  if (!this._eventListeners[eventName]) this._eventListeners[eventName] = [];
  this._eventListeners[eventName].push(callback);
};

// 测试代码
const my_arr = [];
my_arr.addEventListener('push', (item) => {
  console.log(`${item} was pushed in my_arr`);
});
my_arr.push(3); // 输出"3 was pushed in my_arr"
my_arr.push(4, 5); // 依次输出"4 was pushed in my_arr"、"5 was pushed in my_arr"

方法2：创建数组包装类（推荐） #

通过继承Array创建自定义类，仅让该类的实例具备事件监听能力，完全避免原型污染，适合库开发场景。

class EventArray extends Array {
  constructor(...args) {
    super(...args);
    this._eventListeners = {};
  }

  // 添加事件监听
  addEventListener(eventName, callback) {
    if (!this._eventListeners[eventName]) this._eventListeners[eventName] = [];
    this._eventListeners[eventName].push(callback);
  }

  // 重写push方法，触发事件
  push(...items) {
    const result = super.push(...items);
    if (this._eventListeners.push) {
      items.forEach(item => {
        this._eventListeners.push.forEach(callback => callback(item));
      });
    }
    return result;
  }

  // 可选：添加移除事件监听的方法
  removeEventListener(eventName, callback) {
    if (!this._eventListeners[eventName]) return;
    this._eventListeners[eventName] = this._eventListeners[eventName].filter(cb => cb !== callback);
  }
}

// 测试代码
const my_arr = new EventArray();
my_arr.addEventListener('push', (item) => {
  console.log(`${item} was pushed in my_arr`);
});
my_arr.push(3); // 输出"3 was pushed in my_arr"

方法3：使用Proxy代理数组（灵活扩展） #

通过Proxy拦截数组的操作，无需修改原型或创建类，就能监听push（以及其他数组操作），同时保留原生数组的所有特性。

function createEventArray(initialArr = []) {
  const eventListeners = {};

  return new Proxy(initialArr, {
    set(target, prop, value) {
      // 拦截push操作：当length属性被修改且新值大于原值时，说明添加了新元素
      if (prop === 'length' && value > target.length) {
        const newItems = target.slice(target.length, value);
        if (eventListeners.push) {
          newItems.forEach(item => {
            eventListeners.push.forEach(callback => callback(item));
          });
        }
      }
      target[prop] = value;
      return true;
    },
    get(target, prop) {
      // 绑定addEventListener方法到代理对象
      if (prop === 'addEventListener') {
        return (eventName, callback) => {
          if (!eventListeners[eventName]) eventListeners[eventName] = [];
          eventListeners[eventName].push(callback);
        };
      }
      return target[prop];
    }
  });
}

// 测试代码
const my_arr = createEventArray();
my_arr.addEventListener('push', (item) => {
  console.log(`${item} was pushed in my_arr`);
});
my_arr.push(3); // 输出"3 was pushed in my_arr"

内容的提问来源于stack exchange，提问作者N. Raj