TIP

这里用到definePorperty的get和set属性

什么是defineProperty呢？它有什么作用？

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

语法 Object.defineProperty(obj, prop, descriptor)

    var obj = { name: '小明'}
    Object.defineProperty(obj, 'age', { value: 14, enumerable: true})
    console.log(obj.age) // 输出 14

它可以定义这个属性的get和set，在set时同时修改dom,更新数据，实现简单得双向数据绑定

    // 双向数据绑定
    <input id="name" />
    <span id="nameAge"></span>

    <script>
        var obj = { age: 14 };

        Object.defineProperty(obj, 'name', {
            get() {
                console.log('get')
            },
            set(val) {
                console.log("set");
                document.getElementById("nameAge").innerText=val + ' 年龄：'+ obj.age;
                document.getElementById("name").value=val;

                }
        })
        document.getElementById("name").addEventListener("keyup",function(event){
            obj.name=event.target.value;
        })
    </script>

如果想用obj.name获取到name,就用一个变量保存val然后get(){return val}