Object.defineProperty新增/修改属性数据代理

1、给对象添加属性

    <script type="text/javascript">
        let person = {
    
            name:'庄文杰',
            sex:'男'
        }
        //给对象添加属性 参数：给哪个对象添加属性、属性名、配置项
        Object.defineProperty(person,'age',{
    
            value:18
        })
        //其中age是不可枚举的，不参与遍历的
        console.log(person);
        console.log(Object.keys(person));
    </script>

配置项再加上enumerable:true就可枚举了，还有其他的：

              //给对象添加属性 参数：给哪个对象添加属性、属性名、配置项
        Object.defineProperty(person,'age',{
    
            value:18,
            enumerable:true,//是否可以枚举，默认是false
            writable:true,//是否可以被修改，默认为false
            configurable:true,//是否可以被删除，默认为false
        })

修改num，不会影响到属性age，但希望修改num可以影响修改到age。

    <script type="text/javascript">
        let num = 18;
        let person = {
    
            name:'庄文杰',
            sex:'男',
            age:num,
        }
        console.log(person.age);//18
        //修改num的值，不会影响到person中
        num = 19;
        console.log(person.age);//18
    </script>

要age随num改变只能通过：修改num后，再重新赋值

        num = 19;
        //只能这么修改
        person.age = num;
        console.log(person.age);

这时我们要实现num变化，age自动变，
不需要再通过
person.age = num;去重新赋值
getter函数：

        let num = 18;
        let person = {
    
            name:'庄文杰',
            sex:'男',
        }
         Object.defineProperty(person,'age',{
    
             //当读取person的age属性时，get函数就会被调用，且返回值就是age的值
             get:function(){
    
                 console.log('有人读取了age');
                 return num
             },
        })
        console.log(person.age);//调用了get函数 输出18
        num = 19;
        //每次访问age都会调用get 在函数中return num 的num 也为最新值
        console.log(person.age);//调用了get函数 输出19

除了有getter，还有setter：

        let num = 18;
        let person = {
    
            name:'庄文杰',
            sex:'男',
        }
         Object.defineProperty(person,'age',{
    
             //当读取person的age属性时，get函数就会被调用，且返回值就是age的值
             get:function(){
    
                 console.log('有人读取了age');
                 return num
             },
             //当修改person的age属性时，set函数就会被调用，且收到修改的具体值value
             set(value){
    
                console.log('有人修改了age为'+value);
                num = value
             }  
        })
        person.age = 19;//调用了 set 修改age
        console.log(person);

数据代理：通过一个对象 代理 对另一个对象中属性的操作

let obj1 = {
    x:100};
let obj2 = {
    y:300};
//通过 obj2 代理 对 obj1 属性 x 的操作
Object.defineProperty(obj2,'x',{
    
    get(){
    
        console.log(`读取了obj1.x属性:${
      obj1.x}`);
        return obj1.x;
    },
    set(val){
    
        obj1.x = val
        console.log(`修改了obj1.x属性:${
      obj1.x}`);
    }
})
console.log(obj2);//{ y: 300 }
obj2.x;//读取了x属性
obj2.x = 800;//同时修改了obj1的x
console.log(obj1);//{ x: 800 }
console.log(obj2);//{ y: 300 }