利用Object.defineProperty实现一个简单的MVVM双向绑定

绝地灬酷狼 2023-01-01 01:49 139阅读 0赞

### 文章目录 ###

*  一、Object.defineProperty介绍
 *  二、实现一个简单的MVVM
 *  参考文章

# 一、Object.defineProperty介绍 #

该函数可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

通俗理解就是：给对象添加一个新的属性，或者针对对象里的某些属性，可以给这个属性设置一些特性，比如是否只读，是否可以被for…in或Object.keys()遍历等。

**1.语法**

> Object.defineProperty(obj, prop, descriptor)

其中obj是要在上面定义属性的对象，prop是要定义或修改的属性名称，descriptor是属性的描述符。

例如：

var obj = { };
    
    Object.defineProperty(obj, "key", { 
      enumerable: false,
      configurable: false,
      writable: false,
      value: "static"
    });

**2.设置特性的方式有2种：数据描述符和存取描述符**  
![在这里插入图片描述][20201230151648723.png]

*  configurable: 是否可以删除目标属性或是否可以再次修改属性的特性。
 *  enumerable: 此属性是否可以被枚举（使用for…in或Object.keys()）。设置为true可以被枚举；设置为false，不能被枚举。默认为false。
 *  value： 属性对应的值,可以使任意类型的值，默认为undefined。
 *  writable： 属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。
 *  getter ：是一种获得属性值的方法，默认值为undefined。
 *  setter：是一种设置属性值的方法，默认值为undefined。

# 二、实现一个简单的MVVM #

通过Object.defineProperty(obj, prop, descriptor)劫持对象的属性读写。

//MVVM 实现input输入框和show双向绑定
    function defineProperty(obj, attr){ 
        Object.defineProperty(obj, attr, { 
            get:function(){ 
                return this.attr;
            },
            set:function(val){ 
                if(this.attr == val) return;
                this.attr = val;
                document.getElementById('show').innerHTML = val;
            }
        })
    }
    
    var obj = { };
    defineProperty(obj, 'txt');
    document.getElementById('input').addEventListener('keyup', function(e){ 
        obj.txt = e.target.value;
    })

# 参考文章 #

[https://juejin.cn/post/6844903785844703240][https_juejin.cn_post_6844903785844703240]  
[https://blog.csdn.net/hefeng6500/article/details/75194506][https_blog.csdn.net_hefeng6500_article_details_75194506]  
[https://www.cnblogs.com/soraly/p/10305157.html][https_www.cnblogs.com_soraly_p_10305157.html]

[20201230151648723.png]: /images/20221120/4a90dc03337c448b98aeab068b8d0b46.png
[https_juejin.cn_post_6844903785844703240]: https://juejin.cn/post/6844903785844703240
[https_blog.csdn.net_hefeng6500_article_details_75194506]: https://blog.csdn.net/hefeng6500/article/details/75194506
[https_www.cnblogs.com_soraly_p_10305157.html]: https://www.cnblogs.com/soraly/p/10305157.html