js监听对象的方式

Wxinin

已于 2022-08-30 16:18:51 修改

阅读量690

点赞数 1

分类专栏： javaScript高级文章标签： javascript 前端开发语言

于 2022-08-30 16:16:40 首次发布

本文链接：https://blog.csdn.net/weixin_44283589/article/details/126606749

版权

javaScript高级专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、
const obj = {
  name: "why",
  age: 18
}

Object.defineProperty(obj, "name", {
  get: function() {
    console.log("监听到obj对象的name属性被访问了")
  },
  set: function() {
    console.log("监听到obj对象的name属性被设置值")
  }
})



Object.keys(obj).forEach(key => {
  let value = obj[key]

  Object.defineProperty(obj, key, {
    get: function() {
      console.log(`监听到obj对象的${key}属性被访问了`)
      return value
    },
    set: function(newValue) {
      console.log(`监听到obj对象的${key}属性被设置值`)
      value = newValue
    }
  })
})

二、ES6
const obj = {
  name: "why",
  age: 18
}

const objProxy = new Proxy(obj, {
  // 获取值时的捕获器
  get: function(target, key) {
    console.log(`监听到对象的${key}属性被访问了`, target)
    return target[key]
  },

  // 设置值时的捕获器
  set: function(target, key, newValue) {
    console.log(`监听到对象的${key}属性被设置值`, target)
    target[key] = newValue
  }
})