js中利用Object.defineProperty重写set和
2019-05-10 本文已影响0人
leon12138
定义
MDN对Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。值得注意的是，
Object.defineProperty()方法会返回修改后的对象
语法
Object.defineProperty(obj, prop, descriptor)
obj要在其上定义属性的对象。
prop要定义或修改的属性的名称。
descriptor将被定义或修改的属性描述符。
返回值被传递给函数的对象。
代码
var a=null
var abc= Object.defineProperty(this, 'a', {
get: function () {
console.log('get')
return a
},
set: function (newValue) {
console.log('set',newValue)
a=newValue
return
}
})
var b = this.a
this.a = 3
//输出为：
// get
// set 3
应用
利用
Object.defineProperty重写set和get，我们可以实现一个简单的双向绑定。
<body>
<input type="text" id="model"><br/>
<div id="modelText"></div>
</body>
<script>
Object.defineProperty(this,'data',{
//改变视图的值
set:function (newValue){
console.log(newValue)
document.querySelector('#modelText').innerHTML =newValue
document.querySelector('#model').value =newValue
data=newValue
}
})
//监听输入框的值
document.querySelector('#model').oninput=function (e) {
data=e.target.value
}
setTimeout(function () {
data=123
},3000)
</script>
