JavaScript Object.defineProperty()方法
该方法可用于数据的双向绑定,vue.js的数据双向绑定也是基于该方法扩展。
参数
Object.defineProperty(data,"price",{
get:function(value){
},
set:function(value){
},
})
该方法一共三个参数
- 被修改的对象
- 添加或者修改的对象属性
- 描述:具体方法的设置
描述的参数:
value:属性的值
writable:如果为false,属性的值就不能被重写,只能为只读了
enumerable:是否能在for…in循环中遍历出来或在Object.keys中列举出来
get set方法, 注意get set不能与value同时使用
使用get set 默认调取该属性的get方法
set方法是设置值的时候调用。。。
也就是说
当使用get set方法的时候就不能使用value 等属性
示例如下:
const data = {
'price':10,
'title':'产品'
};
document.getElementById("inputbox").addEventListener("input",function(e){
data.price = e.target.value;
});
Object.defineProperty(data,"price",{
get:function(value){
return value + "price 被获取了";
},
set:function(value){
console.log(value);
document.getElementById("showbox").innerHTML = value;
}
})
data.price;//调用get
data.price = 20;//调用set,每当price修改时,修改showbox的内容