zxd's Blog

1. Object.defineProperty()

// 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 )不能混合使用

描述符默认值

拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。
属性值和函数的键 value、get 和 set 字段的默认值为 undefined。

// 在对象中添加一个设置了存取描述符属性的示例
// 存取属性 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

1. Object.defineProperty() ​

描述符默认值 ​

1. Object.defineProperty()

描述符默认值