利用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种：数据描述符和存取描述符

• 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://blog.csdn.net/hefeng6500/article/details/75194506
https://www.cnblogs.com/soraly/p/10305157.html