美文网首页
js中利用Object.defineProperty重写set和

js中利用Object.defineProperty重写set和

作者: leon12138 | 来源:发表于2019-05-10 11:26 被阅读0次

    定义

    MDNObject.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重写setget,我们可以实现一个简单的双向绑定。

    <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>
    

    相关文章

      网友评论

          本文标题:js中利用Object.defineProperty重写set和

          本文链接:https://www.haomeiwen.com/subject/fliooqtx.html