Object.defineProperty方法

默永

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

2023-01-10 20:57:53 196 💗 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上

目录导航

打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接

2023-01-10 20:57:53 0个人觉得很赞

发表评论

评论列表

博主

删除

点击加载更多

快来参与评论

公告

昵称：默永

园龄：2年171天

注册时间：2021-11-15

当前在第：1页

总共：1条

搜索

精品文章 48小时阅读排行

优秀文章 7天获赞排行