ES6之Proxy

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

1. 对真实数据进行修改

例如：对于租房这个场景，xiaoming 是房东，他想租出的价格是190；但是他不想将自己的姓名和真实的价格暴露给客户，那么他就找一个中介 o

let o = {
  name: 'xiaoming',
  price: 190
}

let d = new Proxy(o, {
  get (target, key) {
    if (key === 'price') {
      return target[key] + 20
    } else {
      return target[key]
    }
  }
})

console.log(d.price, d.name)

2. 将数据变成只读的，不让你修改

let d = new Proxy(o, {
  get (target, key) {
    return target[key]
  },
  set (target, key, value) {
    return false
  }
})
d.price = 300
console.log(d.price, d.name)

当然，通过es5也是可以实现的：

但是，这二者还是有本质区别的，es5是从根本上不能进行写操作了，包括它自己，而proxy只是用户不能进行写操作了，自己还是可以修改的。注意二者区别。

3. 通过代理来进行数据校验

// 监听错误
window.addEventListener('error', (e) => {
  console.log(e)
  // report('./')
}, true)
//
let o = {
  name: 'xiaoming',
  price: 190
}
// // 校验规则
let validator = (target, key, value) => {
  if (Reflect.has(target, key)) {
    if (key === 'price') {
      if (value > 300) {
        // 不满足规则就要触发错误
        throw new TypeError('price exceed 300')
        // return false
      } else {
        target[key] = value
      }
    } else {
      target[key] = value
    }
  } else {
    return false
  }
}
let d = new Proxy(o, {
  get (target, key) {
    return target[key] || ''
  },
  set: validator
})
d.price = 301
d.name = 'hanmeimei'
d.age = 400
console.log(d.price, d.name, d.age)

4. 撤销代理

通过Proxy.recocable()产生的代理既有上面new Proxy() 的能力，又有取消代理的能力。
例如：

let o = {
  name: 'xiaoming',
  price: 190
}

let d = Proxy.revocable(o, {
  get (target, key) {
    if (key === 'price') {
      return target[key] + 20
    } else {
      return target[key]
    }
  }
})

console.log(d.proxy.price, d)
setTimeout(function () {
  d.revoke() // 撤销代理
  setTimeout(function () {
    console.log(d.proxy.price) // 再次读取的时候就会报错了！
  }, 100)
}, 1000)

其中，d.proxy相当于 第一个例子new Proxy()产生的d，但同时又可以使用d.revoke()撤销代理。