2023-02-13

Object.defineProperty()在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

句法

Object.defineProperty(obj, prop, descriptor)
obj:目标对象
prop:要操作对象的属性
descriptor:属性的配置信息对象。

descriptor

descriptor是一个对象,有以下配置项。
value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)
writable:当且仅当该属性的 writable 键值为 true时,属性的值,也就是上面的value,才能被赋值运算符改变。默认为 false
enumerable:当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。默认为 false
configurable:当且仅当该属性的 configurable 键值为 true 时,该属性的descriptor才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false

let rose = {age: 18}
Object.defineProperty(rose, 'gender', {
    value: 'female',
    // writable:false,
    // enumerable:false,
    // configurable:false
})
rose.gender='male'
console.log(rose)//gender依旧为female,因为writable默认为false
console.log(Object.keys(rose))//只有age一个项,因为enumerable默认为false
console.log(delete rose.gender) //false 删除失败,configurable默认为false
Object.defineProperty(rose, 'gender', {
    value: 'male',
    writable:true
})// Uncaught TypeError: Cannot redefine property: gender at Function.defineProperty  configurable默认为false,配置项不能修改,在第一次定义为true时就可以修改

get 用来读取属性值的函数
set用来设置属性值的函数
!!注意:【value/writable】和【get/set】不能同时存在。

const o = {}
let bValue = 38;
Object.defineProperty(o, "b", {
  get() {
    return bValue;
  },
  set(newValue) {
    bValue = newValue;
  },
  enumerable: true,
  configurable: true,
});

get和set可以用来做响应式数据的监测,Vue2的响应式就是基于此实现的。

let data = {
    name: 'zyl',
    hobby: ['diving', 'basketball'],
    age: 18
}

function Observer(obj) {
    let keys = Object.keys(obj)
    keys.forEach((key) => {
        Object.defineProperty(this, key, {
            get() {
                return obj[key]
            },
            set(val) {
                console.log(`${key}属性改变了,执行更新模板操作`)
                obj[key] = val
            }
        })
    })
}

let vm = {}
vm._data= data = new Observer(data)
data.age = 20
// console.log(vm._data)

function set(obj, key, val) {
    let _val = val
    Object.defineProperty(obj, key, {
        get() {
            return _val
        },
        set(value) {
            _val = value
        }
    })
}
set(vm._data, 'favoriteColor', 'green')
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容