记得之前看vue的原理,双向数据绑定,说是用ES5的Object.defineProperty里面的getter和setter方法,然后就记下来,每次有人面试问到,都这样说,其实根本不知道,这个东西干嘛用的.最近在看你所\不知道的javascript(上卷),有详细讲到了关于Object.defineProperty.
在Es5中可以使用getter和setter部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上。getter是一个隐藏函数，会在获取属性值时调用。setter也是一个隐藏属性，会在设置属性值时调用。
Object.defineProperty(
myObject, //目标对象
"b", //属性名
{ //描述符
//给b设置一个getter
get:function(){
return this.a*2
},
//确保b会出现在对象的属性列表中
enumerable:true
}
);
console.log(myObject.a) //2
console.log(myObject.b) //4
}
就是当给属性赋值或者获取属性的时候会调用get,和set里面的方法.
vue里面的数据绑定就是基于defineProperty的原理去实现的,那么就自己尝试一下如何去实现一个简单的双向数据绑定吧
<body>
<input type="text" oninput="changeInput(this)">
<p id="inputValue"></p>
<script>
const obj = {
}
Object.defineProperty(obj,'a',{
set:function(value){
this._a_ = value
document.getElementById('inputValue').innerHTML = value
},
get: function(){
return this._a_
},
enumerable: true
})
function changeInput(target) {
obj.a = target.value
}
</script>
</body>
监听input的数据变化,然后赋值给obj.a,然后会触发set方法,就实现了一个简单数据绑定啦!!!
网友评论