Object.defineProperty方法可以在一个对象上定义一个新的属性,或者修改该对象原有的属性,并返回该对象。基础的语法格式如下:
var data = {}//定义一个对象
Object.defineProperty(data,'name',{
configurable:false,//设置对象的属性是否可以被修改/删除(默认为false)
enumerable:false,//设置对象的该属性是否可以枚举(默认为false)
value:111,//设置对象该属性的值(数值,对象,函数等)默认为undefined
writable:false,//设置对象该属性的值是否可以修改(默认为false)
//get函数,函数的返回值被用作属性的值
//set函数,属性值被修改时,调用此函数。
})
可以利用该属性,实现vue的双向绑定:
html部分:
<input type="text" id="text" placeholder="请输入你的名字" />
<p id="textshow"></p>
js部分:
var obj = {}
Object.defineProperty(obj,'name',{
set(val){
$('#text').val(val);//设置或返回表单字段的值
$('#textshow').text(val);//设置或返回元素的文本内容
},
get(){}
})
$('#text').keyup(function(event){
obj.name = event.target.value;
})
console.log(obj)
实现效果如图
当在控制台设置属性的值,dom页面也会做出改变
实现效果如图所示
当对象需要设置多个属性时,可以使用Object.defineProperties
语法格式为:
var obj = {};
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello',
writable: false
}
// etc. etc.
});
好嘞,结束,今天又是涨知识的一天!