js实现监听数组方法，可设置监听数组或者属性是否调用或其他逻辑处理

**需求：**对日常的数组方法进行使用的时候，我们可能有需求在某些方法进行调用的时候做一下逻辑处理，可是如何才能监听该方法调用的时候进行逻辑处理呢？

**实现：**我们知道数组的方法是在数组的原型链上的，只要变量/常量的类型被定义为数组，它的原型链上就会有数组的方法，那么我们需要监听数组的方法或者属性，就需要重写一下数组的方法。

1. 需要重写数组方法，我们首先需要获取到数组的方法，而方法在原型上，我们就先从原型上获取到所有数组内置的方法和属性。

2. 我们知道数组的原型是个数组，所以定义一个新数组，来获取我们重写后的数组方法；

3. 遍历获取数组原型上的所以属性及方法，筛选出方法/属性，进行对应的监听处理。

const arrayProtoType = Object.create(Array.prototype)
// 创建一个新的原型，这就是改造之后的数组原型
const ArrayProto = []
// 重新构建Array原型里面的虽有方法
Object.getOwnPropertyNames(Array.prototype).forEach(key => {
// console.log(key)
if (typeof arrayProtoType[key] === “function”) {
ArrayProto[key] = function () {
listenMethods(key);
return arrayProtoType[key].apply(this, arguments)
}
} else {
listenProps(key)
ArrayProto[key] = arrayProtoType[key]
}
})

function listenMethods(method){
console.log(${method}触发了);
// 其他你需要监听的逻辑
}

function listenProps(prop){
console.log(${prop}触发了);
// 其他你需要监听的逻辑
}

let list = []
// 将数组的原型链指向新构造的原型
list.proto = ArrayProto
// 执行push事件
list.push()
list.join()
list.length

复制代码
效果如下：

作者：慕容望舒
链接：https://juejin.im/post/6888090218679762951/
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。