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

男人而已

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

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

1. //创建一个数组原型对象
2. var arrayProtoType = Object.create(Array.prototype);
3. var ArrayProto = [];
4. //重构原型里的方法，同时将重构后的方法赋值给自定义好的数组
5. Object.getOwnPropertyNames(Array.prototype).forEach(function (key) {
6.   // console.log(key)
7.   if (typeof arrayProtoType[key] === "function") {
8.     ArrayProto[key] = function () {
9.       listenProtoMethods(key);
10.       return arrayProtoType[key].apply(this, arguments);
11.     };
12.   } else {
13.     listenProps(key);
14.     ArrayProto[key] = arrayProtoType[key];
15.   }
16. });
17. function listenProtoMethods(method) {
18.   console.log("".concat(method, "\u89E6\u53D1\u4E86"));
19.   //当监听到数组函数变化时执行回调逻辑callback
20.     dataChanged();
21. }
23. function listenProps(prop) {
24.   console.log("".concat(prop, "\u89E6\u53D1\u4E86"));
25.   //当监听到数组属性变化时执行回调逻辑callback
26.          dataChanged();
27. }
28. //监听到属性发生变化时执行以下方法
29. function dataChanged(){
30.         console.log('arry data has changed...')
31. }
32. var arryWatched = [];
33. //将被监听的数组原型链指向新构造的原型对象
34. arryWatched.__proto__ = ArrayProto;
35. //执行以下函数时将触发回调函数
36. arryWatched.push();
37. arryWatched.join();

复制代码

二.利用Proxy对象将监听对象与配置的监听函数进行关联绑定，实现监听属性变化
        此种方法存在兼容性问题，低版本浏览器不支持Proxy函数

1. const array = [];
2. //定义监听配置条件
3. const changeHandler = {
4.   get(target, property) {
5.     return target[property];
6.   },
7.   set(target, property, value) {
8.     target[property] = value;
9.     console.log('数组发生变化:', target);
10.     return true;
11.   },
12.   deleteProperty(target, property) {
13.     delete target[property];
14.     console.log('数组发生变化:', target);
15.     return true;
16.   }
17. };
18. //new一个代理对象将监听配置挂接到数组对象实现监听数组变化
19. const proxyArray = new Proxy(array, changeHandler);
20. proxyArray.push("data1")
21. proxyArray.push("data2")

复制代码

 

来源:https://www.cnblogs.com/yangzhihui/p/watch_object_property.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！