js劫持数组push方法

const withVolume = [];

withVolume.push = function (...items) {
    
    console.log(items);
    return Array.prototype.push.call(this, ...items);
};

如果使用尖头函数

withVolume.push = (...items) => {
    
    console.log(items);
    return Array.prototype.push.call(withVolume, ...items);
};

在ts中使用

interface MonitorArray<T> extends Array<T> {
    
    monitoringChanges?: (...items: T[]) => void;
}

const withVolume: MonitorArray<Object3D> = [];

withVolume.push = (...items: typeof withVolume[number][]) => {
    
    if (typeof withVolume.monitoringChanges === "function") withVolume.monitoringChanges(...items);
    return Array.prototype.push.call(withVolume, ...items);
};

withVolume.monitoringChanges = (...items: typeof withVolume[number][]) => {
    
    console.log("change :", ...items);
};

构造函数修改

interface MonitorArray<T> extends Array<T> {
    
    constructor:{
    
        prototype:{
    
            monitoringChanges?: (...items: T[]) => void;
        }
    }
}

withVolume.constructor.prototype.monitoringChanges = (...items: typeof withVolume[number][]) => {
    
    console.log("change :", ...items);
};

JavaScript如何监测数组的变化
proxy的理解及proxy为什么可以监听数组？