Skip to content

img

1. Object.defineProperty()

js
// 1. 语法:
Object.defineProperty(obj, prop, descriptor)
// 2. 参数
    obj: 要定义属性的对象
    prop: 要定义或修改的属性名
    descriptor: 要定义或修改的属性描述符 是一个对象:{}
// 3. 作用:
// => 在一个对象上定义一个新属性,或者修改一个对象的现有属性.
// 4. 返回值:传入的obj

descriptor这个对象的6个属性 - MDN 文档

  • configurable,属性是否可以被修改或者删除,默认 false。
  • enumerable,属性是否可枚举,默认 false。(1. for in 遍历不出来 2. Object.keys() 枚举)
  • writable, 属性值是否可写(修改),默认为false
  • value , 属性对应的值,默认为undefined
  • get,属性的 getter 函数,当访问该属性时,会调用此函数。
  • set,属性的 setter 函数,当属性值被修改时(设置属性的值时),会调用此函数。

注意:==> writable / value 不能和 get / set 同时存在

=>规定: 数据描述符和存取描述符( get / set )不能混合使用

描述符默认值

  • 拥有布尔值的键 configurableenumerablewritable 的默认值都是 false
  • 属性值和函数的键 valuegetset 字段的默认值为 undefined
js
// 在对象中添加一个设置了存取描述符属性的示例
// 存取属性 get / set
const obj = {}
let num = 99

// 给obj这个对象添加一个age属性,值为num
Object.defineProperty(obj, "age", {
    configurable: true,
    enumerable: true,
    // 使用了方法名称缩写(ES2015 特性)
    // 下面两个缩写等价于:
    // get : function() { return value; },
    // set : function(newValue) { value = newValue; },
    get(){
        console.log('触发了get方法')
        return num
    },
    set(newVal) { 
        console.log('触发了set方法')
        num = newVal; 
    },
})
// 注意
// 点开obj的age属性,才会看到age的值,同时触发get (相当于读取get)
console.log(obj)
// 1. 当读取age属性值的时候,触发getter函数
console.log(obj.age)
console.log('--------------')
// 2. 当设置age属性值的时候,触发setter函数  (set我们一般叫做setter函数)
obj.age = 88

通过给obj的age属性 设置getter和setter函数,我们可以监听obj的age属性的变化

=> https://v2.cn.vuejs.org/v2/guide/reactivity.html

=> https://juejin.cn/post/6844903965180575751