数据劫持

基于一个原本的数据，劫持出来的一个数据

js
    语法 ： Object.defineproperty('向那个对象中添加','要添加的属性名是什么','关于当前属性的一些配置项')

代码展示

js
    <script>
        const obj = {
            name: '张三',
            age: 18
        }

        Object.defineProperty(obj,'gender',{
            value: '男'
        })

        console.log(obj)
    </script>
    
    // 上述的方法 添加的 属性，默认不允许被修改，也不允许被遍历到
    // 除非添加配置项

配置项

js
    <script>
        const obj = {
            name: '张三',
            age: 18
        }

        Object.defineProperty(obj,'gender',{
            value: '男',
            writable: true, // 当前选项决定当前 属性能否被修改，默认为 false ，不允许修改
            enumerable: true  // 当前 选项决定当前属性能否被枚举到，默认为false 不允许被枚举到
        })

        obj.gender = '女'

        console.log(obj)  // {name: '张三', age: 18, gender: '女'}

        for(let key in obj) {
            console.log(key,obj[key])
        }   // name 张三
            // age 18
            // gender 女
    </script>

js
   //正常开发中我们都会选用 get 和 set 因为相比上边的我们多了一个  函数能够出发
   //有了这个函数之后，我们可以做任何事情
   <script>
        const obj = {
            name: '张三',
            age: 18
        }

        Object.defineProperty(obj,'_name',{
            get() {
                return obj.name
            },
            set(val) {
                obj.name = val
            }
        })

        obj._name = '李四'

        console.log(obj)

        for(let key in obj) {
            console.log(key,obj[key])
        }
   
    </script>
   

数据劫持升级

js
    // Object.defineProperty('劫持到哪个对象','属性1','配置项')
    // Object.defineProperty('劫持到哪个对象','属性2','配置项')
    // Object.defineProperty('劫持到哪个对象','属性3','配置项')
    
    
    Object.defineProperties('劫持到那个对象',{
        属性1：{属性1的配置项},
        属性2：{属性2的配置项},
        属性3：{属性3的配置项}
    })

数据代理

js
    //数据代理 / 劫持
    //利用 ES6 新推的一个内置构造函数 proxy
    <script>
        const obj = {
            name: '张三',
            age: 18
        }
        const res = new Proxy(obj,{
            get(target,property){
                // 第一个形参： 我们的代理对象
                // 第二个形参： 我们的代理对象中的某一个属性
                return target[property]
            },
            set(target,property,val){
                target[property] = val
            }
        })
        // 如果我们使用了 数据代理，那么在代理后，给源对象中添加一个新的
        // 数据，那么也会被自动代理（由 proxy 帮助我们完成）
        console.log(obj)  // {name: '张三', age: 18}
        console.log(res)  //Proxy(Object) {name: '张三', age: 18}
    </script>