首页 > 试题广场 >

.js监听对象属性的改变

[问答题]
请你讲一下js监听对象属性的改变具体是怎么实现的,它们各自有什么特点?
例如:vue中使用definePorperty()实现监听者
<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>

编辑于 2019-03-17 16:51:08 回复(0)

(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来定义也同样可以这样监听这个属性的变化哦~

发表于 2020-09-24 14:24:20 回复(0)