ES6数据代理

75 阅读1分钟
  • 数据代理是 官方给的一个名字, 有部分程序员还是习惯性的叫做 数据劫持
  • proxy 是 ES6以后官方推出的 是一个内置构造函数
         const obj = {
            name: '张三',
            age: 18
        }

        // new Proxy 第一个参数 要代理的对象, 第二个参数 一些配置项,    最后会返回一个代理后的对象, 我们需要使用一个变量去接收
        const res = new Proxy(obj, {
            get(target, property) {
                /**
                 *  第一个形参: 就是你要代理的这个对象, 在当前案例中指的就是 obj
                 *  第二个形参: 就是该对象内部的某一个属性, 自动分配
                */
                return target[property]
            },
            set(target, property, val) {
                target[property] = val

                console.log(`你现在想要修改 形参target 的 ${property} 属性, 修改的值为 ${val}, 除此之外你还可以做很多事`)
            }
        })

        // 在代理完成后给原始对象新加一个属性, 此时代理对象依然能够访问到   (Proxy 独有的功能)
        obj.abc = 'qwer'
        console.log(res.abc)

        // console.log(res.age)
        // console.log(res.name)

        res.age = 66
        res.name = '李四'