Js篇-面试题16-如何监控 js 对象属性的变化?

本文探讨了两种方法来监控JavaScript对象属性的变化:1) 使用Object.defineProperty()监听属性变化;2) 利用Proxy代理实现。通过代理,可以在属性值改变时触发特定逻辑。同时,文章鼓励读者在评论区交流讨论相关问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号(ID:itclanCoder)

如果不知道如何操作

点击这里,标星不迷路

如何监控 js 对象属性的变化?

  • 方式 1:通过Object.defineProperty()来监听

var obj = {
  name: 'itclanCoder',
  phone: 13711767328,
};

Object.defineProperty(obj, 'phone', {
  configurable: true, // 属性可配置
  set: function (v) {
    console.log('phone发生了变化');
    this.phone = v;
  },

  get: function () {
    return this.phone;
  },
});
obj.phone = 15213467443;

要想监听属性的变化,首先需要通过Object.defineProperty()为需要监听的属性设置一个代理,通过代理的值,触发setget的方法 在这个方法中编写自己想要的逻辑操作

  • 方法 2-使用 proxy 代理实现

var obj = {
  name: 'itclanCoder',
  phone: 13711767328,
};

var handler = {
  set: function (target, name, value) {
    console.log('phone发生了变化');
    // 改变被代理对象的值,使之保持一致
    target[name] = value;
  },
};

var proxy = new Proxy(obj, handler);
proxy.phone = 1371123765;

上面执行完后,会更新 phone 的值

如果您有问题,欢迎评论下方一起讨论~



公众号(ID:itclanCoder)

码能让您早脱菜籍,文能让您洗净铅华

  可能您还想看更多:

Js篇-面试题15-通过什么方法可以实现-检测页面 DOM 变化


Js篇-面试题11-比较下for..of与for..in的区别

Js篇-面试题9-请说一下Js中的事件循环机制

vuepress建站过程中遇到的一些问题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值