Object.defineproperty
用于对对象添加或修改一个已有的属性(如果他是configurable)并对特性进行设置
举个栗子(该栗子仅仅是列举出Object.defineProperty
所有属性):
var obj = {}
var demo = null;
Object.defineProperty(obj,"a",{
value: 2, //值
writable: true, //写入
configurable: true, //配置
enumerable:true, //枚举 是否可以循环
get: function(){ //获取时方法
return demo
},
set: function(value){ //赋值时方法
demo = value
}
})
具体参数的含义以及使用方法直接看看这个吧
MDN Object.defineProperty
这里使用该方法实现一个简易的vue双向绑定,实现原理是使用set
进行数据的监听
代码如下:
<input id="inputs" type="text" >
<span id="sp"></span>
<script>
var inputs = document.getElementById("inputs"),
span = document.getElementById("sp"),
obj = {};
Object.defineProperty(obj,"msg",{
set: function(value){
inputs.value = value
span.innerHTML = value
}
})
inputs.addEventListener('keyup',function(event){
obj.msg = event.target.value
})
</script>
效果如下,输入框输入的时候,对应span
的内容也会跟着变化