Object.defineProperty重写set和get

最新推荐文章于 2024-07-30 10:27:19 发布

weixin_34198453

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cd3cb39f265da036902b10c

版权

定义

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>
复制代码

weixin_34198453

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Object.defineProperty重写set和get

定义MDN对Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。值得注意的是，Object.defineProperty() 方法会返回修改后的对象语法Object.defineProperty(obj, prop, descriptor)obj 要在其上定义属性的对象。prop ...
复制链接

扫一扫