监听数组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, "\u89E6\u53D1\u4E86"));
  //当监听到数组函数变化时执行回调逻辑callback
    dataChanged();
}

function listenProps(prop) {
  console.log("".concat(prop, "\u89E6\u53D1\u4E86"));
  //当监听到数组属性变化时执行回调逻辑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")
相关推荐
GISer_Jing18 小时前
明天好好总结汇总分析博客
前端·javascript·面试
做运维的阿瑞21 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
谢尔登1 天前
【Nest】日志记录
javascript·中间件·node.js
Andytoms1 天前
Android geckoview 集成,JS交互,官方demo
android·javascript·交互
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
liangshanbo12151 天前
React 18 的自动批处理
前端·javascript·react.js
sunbyte1 天前
每日前端宝藏库 | tinykeys ✨
前端·javascript
Demoncode_y1 天前
Vue3 + Three.js 实现 3D 汽车个性化定制及展示
前端·javascript·vue.js·3d·汽车·three.js
细节控菜鸡1 天前
【2025最新】ArcGIS for JS 实现地图卷帘效果,动态修改参数(进阶版)
开发语言·javascript·arcgis
南屿im1 天前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript