TS 之 Array<T> 监听

转载

mb5fdcae83766b7 2021-08-12 17:45:00

监听数组变化行为，在执行具体方法之前自定义事件

code

type arrayMethodName = "push" | "pop"; //当然你可以指定更多的方法，这个起到提示、限制作用

/**
 * 数组添加方法监听
 *
 * @private
 * @template T any
 * @param {Array<T>} array 数组
 * @param {arrayMethodName} methodName 方法类型
 * @param {(array: Array<T>, args: IArguments) => void)} callback
 * @memberof Mark
 */
function addArrayListener<T>(array: Array<T>, methodName: arrayMethodName, callback: (array: Array<T>, args: IArguments) => void) {
    // 获取Array的原型，并创建一个新的对象指向这个原型
    const arrayMethods = Object.create(Array.prototype)

    // 重新构建Array原型里面的方法
    Object.getOwnPropertyNames(Array.prototype).forEach(method => {

        if (typeof arrayMethods[method] === "function" && method === methodName) {
            array[method] = function () {
                callback(this, arguments);
                return arrayMethods[method].apply(this, arguments)
            }
        }
    })
}

test

let array = new Array<string>();

//监听push方法
addArrayListener(array, "push",(arr,args)=>{
    //console.log("push array: ",arr);
    console.log("push args: ",args);
});

//监听pop方法
addArrayListener(array, "pop",(arr,args)=>{
    console.log("pop array: ",arr);
    //console.log("pop array: ",args);
});


for (let i = 0; i < 5; i++) {
    array.push(i.toString());
}

while (array.length !== 0){
    array.pop();
}