🚀
头像

默永


人生就像骑单车,想保持平衡就得往前走。

Object.defineProperty方法

2023-01-10 20:57:53 261 💗 0 @默永

Object.defineProperty这个方法是Vue数据双向绑定原理的常见面试题

众所周知JS中是支持面向对象编程的,我们常见创建对象的方法是这样的

let persor = {
    name: "张三",
    sex: "男"
}

我们一般添加属性就是直接persor.age = 18或者修改原有属性persor.name = ""

然而Object.defineProperty这个方法可以更高级的给一个对象添加属性或者定义属性用的

这个方法接收三个参数

1. 属性所在的对象

2. 属性的名字

3. 一个描述符对象

let number = 19;
let persor = {
    name: "张三",
    sex: "男"
}
Object.defineProperty(persor, "age", {
    value: 18,
    enumerable: true, // 控制属性是否可以枚举,默认值是false
    writable: true, // 控制属性是否可以被修改,默认值是false
    configurable: true, // 控制属性是否可以被删除,默认值是false
    // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
    get() {
        console.log("有人读取了age属性");
        return number;
    },
    // 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
    set(value) {
        console.log("有人修改了age属性,且值是", value);
        number = value;
    }
})

你还来可以进行定义多个属性

Object.defineProperties(persor,{
    name:{
        writable:false,
        value:"lisi"
    },
    age : {
        writable:true,
        value : 16,
    },
    sex:{
        get(){
            return '男';
        },
        set(v){
            p1.sex = v
        }
    }
})

Vue中的数据代理

1. Vue中的数据代理:

    通过vm对象来代理data对象中属性的操作(读/写)

2. Vue中数据代理的好处

    更加方便的操作data中的数据

3. 基本原理

    通过Object.defineProperty()把data对象中所有属性添加到vm上

    目录导航