前言
本文记录笔者对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就整理到这里啦。