2、数据代理

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

<script type="text/javascript">
    let number = 18
    let person = {
        name: '张三',
        sex: '男',
    }

    Object.defineProperty(person, 'age', {
        value: 20,// 给age赋值
        enumerable: true, //控制属性是否可以枚举，即是否可以遍历，默认值是false
        writable: true, //控制属性是否可以被修改，默认值是false
        configurable: true //控制属性是否可以被删除，默认值是false

    })

    console.log(Object.keys(person))

    console.log(person)
</script>

getter() && setter()

getter：利用getter可以将外部数据与defineProperty进行关联

setter：利用setter可以将对象的值进行修改

<script type="text/javascript">
    let number = 18
    let person = {
        name: '张三',
        sex: '男',
    }

    Object.defineProperty(person, 'age', {
        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            console.log('有人读取age属性了')
            return number
        },

        //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
            console.log('有人修改了age属性，且值是', value)
            number = value
        }

    })

    console.log(person)
</script>

数据的双向绑定

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    let obj1 = { x: 100 }
    let obj2 = { y: 200 }

    // 实现效果，obj1与obj2之间的x能相互影响
    Object.defineProperty(obj2, 'x', {
        get() {
            return obj1.x
        },
        set(value) {
            obj1.x = value
        },
    })
</script>