博客

前言

本文记录笔者对Vue中Object.defineProperty()方法的整理

一、方法介绍

我们都知道JS中能够创建一个对象，并给对象相应的属性值进行复制，而在Vue中，Object.defineProperty()方法能够起到给已创建对象进行属性对象赋值的作用。

例：JS中创建对象

var p1 ={
    name:"duixiang",
}

而在Object.defineProperty()当中，可以通过接收参数对象，对对象属性进行赋值。

方法具体接受三个参数

• 属性所在的对象
• 属性的名字
• 一个描述符对象

描述符对象

描述符对象，这里可以理解为一个数据属性，常见如下：

• configurable 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为true。
• enumerable：表示能否通过for in循环访问属性，默认值为true
• writable：表示能否修改属性的值。默认值为true。
• value：包含这个属性的数据值。默认值为undefined。

相关使用案例

Object.defineProperty(p1,"age",{
    writable :false,
    value : 15,
})
console.log(p1.age); //15
p1.age = 20;
console.log(p1.age); //15

二、get()和set()方法

我们可以修改Object.defineProperty()方法的第三个参数，来设置相应属性的set()和get()方法，从而对对象的属性进行设置和获取；

在设置多种属性时，也可单独对某种属性设置set()和get()方法

1.修改第三个参数获取设置和返回相应属性的方法

var book = {
    _year : 2004,
    edition : 1
}

Object.defineProperty(book,"year",{
    get: function(){
        return this._year
    },
    set: function(newYear){
        if(newYear > 2004){
            this._year = newYear;
            this.edition += newYear - 2004
        }
    }
})

book.year = 2005;
console.log(book.edition); // 2
console.log(book._year); //2005

2.设置多个参数的属性及set()和get()方法

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

p1.sex = "男";
console.log(student.name + ":" + student.age);
console.log(p1.sex); // 男
student.sex = "女";
console.log(student.sex); //男
console.log(p1.sex); // 女

总结

关于Object.defineProperty就整理到这里啦。