<input type="text" id="my-name"> <p id="my-name-get"></p> <script> var inputEle = document.getElementById('my-name') var pEle = document.getElementById('my-name-get') var obj = {} Object.defineProperty(obj,'myName',{ get:function(){ return obj }, set:function(val){ inputEle.value = val pEle.innerText = val } }) inputEle.onkeyup = function(e){ obj.myName = this.value } </script>
(1)在ES5中可以通过Object.defineProperty来实现已有属性的监听
Object.defineProperty(user,'name',{ set:function(key,value){ } })
缺点:如果id不在user对象中,则不能监听id的变化
(2)在ES6中可以通过Proxy来实现
var user = new Proxy({},{ set:function(target,key,value,receiver){ } })
这样即使有属性在user中不存在,通过user.id来定义也同样可以这样监听这个属性的变化哦~