数据流双向绑定

数据属性

• Configurable 是否可以通过delete删除，默认true
• Enumerable 是否可枚举，即通过for-in循环或Object.keys()返回属性，默认true
• Writable 能否哦被修改，默认true
• Value 该属性对应的值，可被复制，默认undefined

访问器属性

• Configurable 和数据属性一样
• Enumerable 和数据属性一样
• Get 给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值)，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
• Set 给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为
  undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined

Object.defineProperty()

在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

var obj = new Object();

Object.defineProperty(obj, 'name', {
    configurable: false,
    writable: true,
    enumerable: true,
    value: '张三'
})

console.log(obj.name)  //张三

Object.defineProperties()

方法直接在一个对象上定义一个或多个新的属性或修改现有属性，并返回该对象。

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '张三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 张三, 18

数据双向绑定

HTML代码：

<div>
    <p>
        input1=><input type="text" id="input1">
    </p>
    <p>
        input2=>
        <input type="text" id="input2">
    </p>
    <div>
        我每次比input1的值加1=>
        <span id="span"></span>
    </div>
</div>

JS代码：

<script >
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oSpan = document.getElementById('span');
var obj = {};
Object.defineProperties(obj, {
    val1: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput2.value = newValue;
            oSpan.innerHTML = Number(newValue) + Number(oInput2.value);
        }
    },
    val2: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput1.value = newValue;
            oSpan.innerHTML = Number(newValue) + Number(oInput1.value);
        }
    }
})
oInput1.value = obj.val1;
oInput1.addEventListener('keyup', function() {
    obj.val1 = oInput1.value;
}, false)
oInput2.addEventListener('keyup', function() {
    obj.val2 = oInput2.value;
}, false)
</script>

参考链接：https://segmentfault.com/a/1190000011294519