Proxy与Reflect

进修es6的新语法糖既能进修到新东西，又能使得本身的代码越发文雅，逼格更高，爽
proxy与Reflect之间的应用就是Reflect对对象的操纵触发Proxy的阻拦

• Proxy是对对象举行代办，经由过程proxy天生的对象间接操纵底本对象，最常见的就是get与set；语法情势var proxy = new Proxy(target, handler); target是须要操纵的对象，而handler是包括操纵target对象的一些要领的对象
• Reflect是可以越发文雅的运用Object的相干要领

进修API

• get

proxy: get(target, propKey, receiver)=>依次为目的对象、属性名和 proxy 实例本身（严格地说，是操纵行动所针对的对象），个中末了一个参数可选。

let obj = {
    a: 'foo',
    b: 'Proxy',
    foo: ''
 }
let proxy = new Proxy(obj, {
    get (target, proKey, receive) {
      console.log(target === obj)     //true
      return '当对proxy举行取值操纵时会触发这个get函数'
      
    }
 })

ps:proxy对target举行了代办，target就是obj对象，receive用于划定this究竟指向哪一个对象，

proxy.foo   //当对proxy举行取值操纵时会触发这个get函数

上面这类状况并没有转变this的，所以console.log(receive === proxy) //true
Reflect也有get要领：Reflect.get(target, prokey, receive)

Reflect.get(proxy, 'foo') //同上没有this的指向

let newobj = {
    foo: 'this指向将转变'
}
Reflect.get(proxy, 'foo', newobj)  //foo = console.log(receive === proxy)  //true

所以对Reflect.get的第三个参数举行赋值将带入带proxy的get的第三个参数中

• set

与get相似，这个是赋值时会触发set要领
proxy: set(target, propKey, value, receiver)

  let obj = {}
  let newobj = {
    a: '123'
  }
  let proxy = new Proxy(obj, {
    set (target, proKey, value, receive) {
      return target[proKey] = `当对proxy举行赋值操纵时会触发这个set函数${value}`
      
    }
  })
  proxy.a = 666      //receive === proxy  true
  Reflect.set(proxy, 'a', 888)          //receive === proxy  true
  Reflect.set(proxy, 'a', 888, newobj)  //receive === newobj  true

• apply

proxy的apply：apply(target, object, args)

  let twice = {
    apply (target, ctx, args) {
      console.log(ctx)    //undefined
      return Reflect.apply(...arguments);
    }
  }
  function sum (left, right) {
    this.num = 888  /假如ctx没有传入或许传入null，则会举行window.num = 888的赋值
    return left + right + this.nm
  }
  let obj = {
   nm: 666
  }
  var proxy = new Proxy(sum, twice);
  console.log(proxy(1, 2)) // 6
  console.log(proxy.apply(obj, [7, 8]))  //ctx则为obj,并转变return

实行流程：proxy触发函数挪用，实行apply的要领，将参数自动带入，target就是sum函数，ctx没有传入为undefined,args为1, 2,接下来将悉数参数带入实行Reflect.apply

• has

has比较简单，是对对象举行in运算，推断该属性是不是存在对象中，可所以本身也可所以原型链上，不论是不是可遍历

• construct

在组织函数new时触发，

  var p = new Proxy(function () {}, {
    construct: function(target, args, newTarget) {
      console.log('called: ' + args.join(', '));
      console.log(newTarget === p)
      return { value: args[0] * 10 };
    }
  });

  console.log((new p(1)).value)
  //等价于下面，Reflect.construct(target, args)， args必需是数组
  console.log(Reflect.construct(p, [1]))

• ownKeys

返回对象中本身的一切属性，固然详细照样取决于return 什么内容；

触发前提：
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for...in轮回

let target = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.for('secret')]: '4',
};

Object.defineProperty(target, 'key', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: 'static'
});

let handler = {
  ownKeys(target) {
    return ['a', 'd', Symbol.for('secret'), 'key'];
  }
};

let proxy = new Proxy(target, handler);
console.log(Object.keys(proxy))    //自动过滤symbol，不存在的属性，不可遍历的属性
console.log(Reflect.ownKeys(proxy)) //返回handler中return的值