Object.defineProperty的使用

北寻北爱

已于 2023-02-20 17:23:10 修改

阅读量82

点赞数

分类专栏： vue 文章标签： vue.js

于 2023-02-20 17:06:37 首次发布

本文链接：https://blog.csdn.net/qq_43415562/article/details/129127607

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了如何使用`Object.defineProperty`方法为JavaScript对象添加具有控制特性的属性，包括可遍历性、可修改性和可删除性。同时，展示了如何实现数据的读取和设置的监听，以及数据代理的概念，通过一个对象代理对另一个对象的属性进行操作。

摘要由CSDN通过智能技术生成

当前写法可以为person对象添加age属性，但是当前属性不能被遍历、被修改、被删除

let person = {
    name: 'xss',
      sex: '女'
  }
  Object.defineProperty(person, 'age', {
      value: 18
 })

为对象添加可操作属性的写法

let person = {
   name: 'xss',
    sex: '女'
}
Object.defineProperty(person, 'age', {
    value: 18,
    enumerabel: true, // 控制属性是否可遍历
    wriable: true, //   控制属性是否被修改
    configurable: true //控制属性是否被删除
})

实现两个数据之间的数据交互

let ageNum = 18
let person = {
    name: 'xss',
    sex: '女'
}
Object.defineProperty(person, 'age', {
    // 当读取person对象的age属性时，get函数(getter)就会被调用,且返回值就是age的值
    get() {
        console.log('获取age值')
        return ageNum
    },
    // 当修改person对象的age属性时，set函数(setter)就会被调用，且会收到修改的值
    set (value) {
        console.log('设置age值', value)
        ageNum = value
    }
})

// person.age = 20  两者都会同时被修改
// ageNum = 20   会重新通过get获取新的值

数据代理： 通过一个对象代理对另一个对属性的操作(读/写)

let obj = {x: 11}
let obj2 = {y: 22}
Object.defineProperty(obj2, 'x', {
    get () {
        return obj.x
    },
    set (value) {
        obj.x = value
    }
})