新手上路,不喜勿喷,在学习的路上和大家分享知识;
本人之前对于Object.defineProperty这个方法是没有什么太大的感觉的,因为在学习Vue的时候,偶然间想起来这个方法,就想着试试实现数据双向绑定,废话不多说,直接上代码;
首先,我们创建一个对象;
let person = {
name:"小红帽",
sex:"男"
}
在浏览器中查看person这个对象,可以发现通过定义对象有两个键值对分别是name和sex;
如果说我们想为小红帽添加age属性,第一种是直接在person对象中添加age属性就可以了,第二种方法就是通过调用Object.defineProperty方法进行设置age属性,其中第一个参数就是我们要为哪个对象进行添加属性,第二个参数就是添加什么属性,value就是我们设置的值(如果你想喷我,我就愿意用第一种方法省事咋啦,你先忍忍先往下看);
let person = {
name:"小红帽",
sex:"男",
age:18
}
let person = {
name : "小红帽",
sex : "男",
}
Object.defineProperty(person,'age',{
value:18
})
仔细观察可以发现在person对象中age属性的颜色不一样,原因就是因为通过defineProperty方法添加的属性不可以被修改、枚举和删除(不信你就试试);
当然了,如果你说我就非要修改、删除和枚举呢(哈哈哈),可以的,我们通过控制属性就可以进行对age的枚举、修改和删除啦(那你说个屁呢)。。。;
let person = {
name : "小红帽",
sex : "男",
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true,//通过控制属性可以枚举,默认值就是false
writable:true,//通过控制属性可以编辑修改,默认值就是false
configurable:true//通过控制属性可以被删除,默认值就是false
})
言归正传,我现在想实现这样的一个需求,我不设置age属性值,我想根据我定义的number随意更改我的age值,当然了直接在person对象中直接定义也行(你不怕麻烦就行);
这时候我们的大佬登场啦,就是get方法,让age属性和number进行绑定,
let number = 18
let person = {
name : "小红帽",
sex : "男",
}
Object.defineProperty(person,'age',{
get(){
console.log(this)
return number
}
})
好奇的小可爱就会发现,擦,我age属性呢???
别急,你再打印person对象看看
但是细心的小可爱就发现了虽然age存在,但是为什么和name他们不一样呢,我们把鼠标放上去看看
有一个这么个东西,翻译过来就是引用getter属性,点击进去就会发现我们设置的number的值就绑定上了,和getter相配合的是setter属性,通过setter设置number=value,就可以实现绑定效果了;
let number = 18
let person = {
name : "小红帽",
sex : "男",
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true,
// writable:true,
// configurable:true
get(){
console.log(this)
return number
},
set(value){
number = value
}
})
好奇的小可爱可以试试看!!!