监听数组Array变化或Obj属性变化

工作中经常会遇到监听数组发生变化时执行相应的回调触发逻辑，客户应用场景中需要实现对象变量的动态监听，当变量发生变化时触发回调函数，实现事件发送等应用场景。      
通常由以下两种方式实现需求

一.通过改变对象原型prototype方法实现回调监听

//创建一个数组原型对象 var arrayProtoType = Object.create(Array.prototype); var ArrayProto = []; //重构原型里的方法，同时将重构后的方法赋值给自定义好的数组 Object.getOwnPropertyNames(Array.prototype).forEach(function (key) {   // console.log(key)   if (typeof arrayProtoType[key] === "function") {     ArrayProto[key] = function () {       listenProtoMethods(key);       return arrayProtoType[key].apply(this, arguments);     };   } else {     listenProps(key);     ArrayProto[key] = arrayProtoType[key];   } }); function listenProtoMethods(method) {   console.log("".concat(method, "u89E6u53D1u4E86"));   //当监听到数组函数变化时执行回调逻辑callback     dataChanged(); }  function listenProps(prop) {   console.log("".concat(prop, "u89E6u53D1u4E86"));   //当监听到数组属性变化时执行回调逻辑callback 	 dataChanged(); } //监听到属性发生变化时执行以下方法 function dataChanged(){ 	console.log('arry data has changed...') } var arryWatched = []; //将被监听的数组原型链指向新构造的原型对象 arryWatched.__proto__ = ArrayProto; //执行以下函数时将触发回调函数 arryWatched.push(); arryWatched.join();

二.利用Proxy对象将监听对象与配置的监听函数进行关联绑定，实现监听属性变化

        此种方法存在兼容性问题，低版本浏览器不支持Proxy函数

const array = [];  //定义监听配置条件 const changeHandler = {   get(target, property) {     return target[property];   },   set(target, property, value) {     target[property] = value;     console.log('数组发生变化:', target);     return true;   },   deleteProperty(target, property) {     delete target[property];     console.log('数组发生变化:', target);     return true;   } }; //new一个代理对象将监听配置挂接到数组对象实现监听数组变化 const proxyArray = new Proxy(array, changeHandler); proxyArray.push("data1") proxyArray.push("data2")