es6-Proxy

什么是Proxy

  let target = {}
  let handle = {}
  let proxy = new Proxy(target, handle)

这就是简单的代理，target目标对象，handle句柄对象，返回一个proxy对象

一个非常简单的Proxy例子

  let target = {
    name: 'Susan',
    age: 20
  }
  let proxy = new Proxy(target, {
    get (target, key) {
      console.log(`拦截对象属性的读取:${key}`)
      return key
    },
    set (target, key, value) {
      console.log(`拦截对象属性的设置:${key}-${value}`)
      if (target[key]) {
        target[key] = value
        return true
      } else {
        return false
      }
    },
    has (target, key) {
      console.log(`拦截key in object操作,简单的隐藏age属性`)
      if (key === 'age') {
        return false
      } else {
        return target[key]
      }
    },
    deleteProperty (target, key) {
      console.log(`拦截delete操作,简单的拦截删除age属性`)
      if (key === 'age') {
        delete target[key]
        return true
      } else {
        return target[key]
      }
    }
  })
  console.log(proxy.name)
  proxy.name = 'Li'
  console.log('has', 'name' in proxy, 'age' in proxy)
  delete proxy.name
  console.log(proxy)
  delete proxy.age
  console.log(proxy)

输出结果

第一个是对象属性的读取，结果如下

拦截对象属性的读取:name
name

第二个是对象属性的设置

拦截对象属性的设置:name-Li

第三个是key in object的拦截

拦截key in object操作,简单的隐藏age属性
拦截key in object操作,简单的隐藏age属性
has true false

接下来4,5,6,7是删除name和age拦截

拦截delete操作,简单的拦截删除age属性
Proxy {name: "Li", age: 20}
拦截delete操作,简单的拦截删除age属性
Proxy {name: "Li"}

通过get  set  has deleteProperty可以更加认识Proxy这个构造函数

那么Proxy有什么用的，可以做拦截。

接下来是一个非常实用的例子

  let validator = (target, validator) => {
    return new Proxy(target, {
      _validator: validator,
      set (target, key, value, proxy) {
        if (target.hasOwnProperty(key)) {
          if (this._validator[key](value)) {
            return Reflect.set(target, key, value, proxy)
          } else {
            throw Error(`不能设置${key}到${value}，非法`)
          }
        } else {
          throw Error(`${key}不存在`)
        }
      }
    })
  }
  const peopleValidators = {
    name (val) {
      return typeof val === 'string'
    },
    age (val) {
      return typeof val === 'number' && val > 0 && val < 100
    }
  }
  class Person {
    constructor (name, age) {
      this.name = name
      this.age = age
      return validator(this, peopleValidators)
    }
  }
  const person = new Person('Susan', 20)
  console.info(person)
  // person.name = 12 // Error: 不能设置name到12，非法
  // person.age = 101 // Error: 不能设置age到101，非法

这是一个简单的name，age校验模块