浅识js——数据代理

163 阅读1分钟

js基础知识——数据代理

一、什么是数据代理?

  • 官方给的一个名字, 有部分程序员还是习惯性的叫做 数据劫持
  • proxy 是 ES6以后官方推出的 是一个内置构造函数
      const obj = {
      name : '哈哈',
      age: 25
    }
    // new Proxy 第一个参数 要代理的对象,第二个参数一些配置项,最后会返回一个代理后的对象,需要使用一个变量接受
    const res = new Proxy(obj,{
      get (target,property) {
        // 第一个形参target:要代理的对象,在当前案例中指的是obj
        // 第二个参数property: 给对象内部的某一个属性,自动分配
        return target[property]
      },
      set (target,property,val) {
        target[property] = val
        console.log(`要修改形参target的${property}属性,修改的值为${val},除此之外好可以干很多事`)
      }
    })

    // 在代理完成后,给原始对象新加一个属性,此时代理对象依然能访问到.
    obj.as = 'qwe'
    console.log(res.as)
    // 访问原始对象
    console.log(res.age)
    console.log(res.name)

    res.age = 999
    res.name = '啊啊'
    console.log(res.age)
    console.log(res.name)