过 Object.defineProperty() 来实现双向数据绑定的小demo

我先写代码 下面有我的代码下面我来代码分析

    <input type="text" id="text1" />
    <input type="text" id="text2" />

js代码

var input1 = document.querySelector("#text1");
        var input2 = document.querySelector("#text2");
        var data = {};
        Object.defineProperty(data, "name", {
            // configurable: false,
            get: function () {
                console.log('2')
                return input1.value;


            },
            set: function (newValue) {
                console.log('3')

                input1.value = newValue;
                input2.value = newValue;
            }
        })
        // data.name = "sss";
        input1.onchange = function () {
            console.log(this.value)

            data.name = data.name;
            console.log(data);
            //inp有值的时候触发  返回vlaue == data //z set触发newvalue ==data  
        }
        input2.onchange = function () {
            input1.value = this.value;
            // 我inp2有的值的时候  inp1的值也被我改变了 然后触发 get 的方法 把值存到数组里面 然后newvalue的值 == inp2的值
            console.log(data);
        }

分析：

          先看两个图片来分析他的执行顺序

 

  分析： 我inp1 有值的时候 oncheng触发函数  然后触发obj的方法 ==》下面的get的方法执行  return inp.value的值 存到data里面  data值发生改变 触发set方法 newValue 的值 ==data  

 

不知道分析的对不对 书上看到的 回来自己研究的 。