ES6的Proxy和ReflectProxy顾名思义，意思是在访问目标对象之前做一层拦截或者代理。例如，访问或者修改该对

介绍Proxy

Proxy顾名思义，意思是在访问目标对象之前做一层拦截或者代理。例如，访问或者修改该对象的属性时，拦截器判断之后，再做下一步的处理例如，下面的代码中，对空对象属性的访问get和修改set都做出了响应的处理

const obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`get ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`set ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

Proxy语法

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

// 语法
const proxy = new Proxy(target, handler);

new Proxy()将会生成一个Proxy实例
target为一个对象，表示响应拦截的目标对象
handler也是一个对象，定义拦截行为

例如, 在下面的代码中，访问proxy对象的任意属性，都会返回666

const proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 666;
  }
});

proxy.value // 666
proxy.id // 666
proxy.date // 666

注意：

如果想要拦截起到作用，需要对Proxy实例进行操作, 而不是通过目标对象操作
如果handler对空对象，没有设置任何拦截，那么对Proxy实例进行操作，就是直接访问目标对象

Proxy 实例也可以作为其他对象的原型对象，下面的代码中, proxy对象是obj对象的原型，obj对象没有time属性，但是根据原型链，会在proxy对象里读取属性，从而进行拦截行为

const proxy = new Proxy({}, {
    get: function(target, propKey) {
        return 666
    }
})

const obj = Object.create(proxy)
obj.date // 666

get

get()在访问对象某个目标对象的属性时执行，可以接受三个参数，依次为目标对象，属性名和实例本身，实例本身为可选参数

如果访问的目标对象的属性不存在，会报错
如果没有拦截函数，同时又访问不存在的属性，就会返回undefined
利用proxy实例作为对象的原型，get方法会被继承
可以使用get()方法实现链式调用

const pipe = function (value) {
  contt funcStack = [];
  const oproxy = new Proxy({} , {
    get : function (pipeObject, fnName) {
      if (fnName === 'get') {
        return funcStack.reduce(function (val, fn) {
          return fn(val);
        },value);
      }
      funcStack.push(window[fnName]);
      return oproxy;
    }
  });

  return oproxy;
}

const double = n => n * 2;
const pow = n => n * n;
const reverseInt = n => n.toString().split("").reverse().join("") | 0;

pipe(3).double.pow.reverseInt.get; // 63

set

set()在赋值对象某个目标对象的属性时执行，可以接受四个参数，依次为目标对象，属性名，属性值和Proxy实例本身，最后的参数为可选参数

例如，在下面的代码中，设置对象的属性值应该是大于666的整数

const validator = {
    set： function(obj, prop, value) {
        if(!Number.isInteger(value) || value > 666) {
            throw new Error('值应为大于666的整数')
        }
        obj[prop] = value
    }
}

let obj = new Proxy({}, validator)

obj.value = 11 // 报错
obj.value = 667 // 667

apply

apply方法拦截函数的调用、call和apply操作。apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象this和目标对象的参数数组

const target = function () { return 'I am the target'; };
const handler = {
  apply: function () {
    return 'I am the proxy';
  }
};

const p = new Proxy(target, handler);

p()
// "I am the proxy"

上面的代码中，当Proxy的实例被调用的时候，就会触发apply()方法进行拦截，返回字符串

const twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  }
}
function sum (left, right) {
  return left + right;
}

const proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30

上面的代码中，执行Proxy函数，或者被call和apply调用时，就会被拦截

其他

has()方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符
construct()方法用于拦截new命令
deleteProperty()方法用于拦截delete操作
getOwnPropertyDescriptor()方法拦截Object.getOwnPropertyDescriptor()
isExtensible()方法拦截Object.isExtensible()操作

介绍Reflect

Reflect对象和Proxy对象一样，也是ES6为了操作对象而提供的新API。Reflect对象的设计目的有

将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。
修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为

// 老写法
'assign' in Object // true

// 新写法
Reflect.has(Object, 'assign') // true

Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为

下面的代码中，Proxy方法拦截target对象的属性赋值行为。它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能

Proxy(target, {
  set: function(target, name, value, receiver) {
    var success = Reflect.set(target, name, value, receiver);
    if (success) {
      console.log('property ' + name + ' on ' + target + ' set to ' + value);
    }
    return success;
  }
});

下面代码中，每一个Proxy对象的拦截操作（get、delete、has），内部都调用对应的Reflect方法，保证原生行为能够正常执行。添加的工作，就是将每一个操作输出一行日志

const loggedObj = new Proxy(obj, {
  get(target, name) {
    console.log('get', target, name);
    return Reflect.get(target, name);
  },
  deleteProperty(target, name) {
    console.log('delete' + name);
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    console.log('has' + name);
    return Reflect.has(target, name);
  }
});

方法

Reflect对象一共有13个静态方法，大部分与Object对象的同名方法的作用都是相同的，而且它与Proxy对象的方法是一一对应的

Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。如果第一个参数不是对象，Reflect.get方法会报错

Reflect.get(target, name, receiver)

// 实例
const myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
}

Reflect.get(myObject, 'foo') // 1
Reflect.get(myObject, 'bar') // 2
Reflect.get(myObject, 'baz') // 3

Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver

Reflect.set(target, name, value, receiver)

// 实例
const myObject = {
  foo: 4,
  set bar(value) {
    return this.foo = value;
  },
};

var myReceiverObject = {
  foo: 0,
};

Reflect.set(myObject, 'bar', 1, myReceiverObject);
myObject.foo // 4
myReceiverObject.foo // 1

注意，如果Proxy对象和Reflect对象联合使用，前者拦截赋值操作，后者完成赋值的默认行为，而且传入了receiver，那么Reflect.set会触发Proxy.defineProperty拦截

let p = {
  a: 'a'
};

let handler = {
  set(target, key, value, receiver) {
    console.log('set');
    Reflect.set(target, key, value, receiver)
  },
  defineProperty(target, key, attribute) {
    console.log('defineProperty');
    Reflect.defineProperty(target, key, attribute);
  }
};

let obj = new Proxy(p, handler);
obj.a = 'A';

上面代码中，Proxy.set拦截里面使用了Reflect.set，而且传入了receiver，导致触发Proxy.defineProperty拦截。这是因为Proxy.set的receiver参数总是指向当前的 Proxy实例（即上例的obj），而Reflect.set一旦传入receiver，就会将属性赋值到receiver上面（即obj），导致触发defineProperty拦截。如果Reflect.set没有传入receiver，那么就不会触发defineProperty拦截

Reflect.has方法对应name in obj里面的in运算符

Reflect.has(obj, name)

const myObject = {
  foo: 1,
};

// 旧写法
'foo' in myObject // true

// 新写法
Reflect.has(myObject, 'foo') // true

Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。该方法返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回true，删除失败，被删除的属性依然存在，返回false

Reflect.deleteProperty(obj, name)

const myObj = { foo: 'bar' };

// 旧写法
delete myObj.foo;

// 新写法
Reflect.deleteProperty(myObj, 'foo');

Reflect.construct方法等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法

Reflect.construct(target, args)

function Greeting(name) {
  this.name = name;
}

// new 的写法
const instance = new Greeting('张三');

// Reflect.construct 的写法
const instance = Reflect.construct(Greeting, ['张三']);

Reflect.getPrototypeOf方法用于读取对象的__proto__属性，对应Object.getPrototypeOf(obj)

Reflect.getPrototypeOf(obj)


const myObj = new FancyThing();
// 旧写法
Object.getPrototypeOf(myObj) === FancyThing.prototype;
// 新写法
Reflect.getPrototypeOf(myObj) === FancyThing.prototype

Reflect.setPrototypeOf方法用于设置目标对象的原型（prototype），对应Object.setPrototypeOf(obj, newProto)方法

Reflect.setPrototypeOf(obj, newProto)

const myObj = {};

// 旧写法
Object.setPrototypeOf(myObj, Array.prototype);
// 新写法
Reflect.setPrototypeOf(myObj, Array.prototype);
myObj.length // 0

Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。一般来说，如果要绑定一个函数的this对象，可以这样写fn.apply(obj, args)，但是如果函数定义了自己的apply方法，就只能写成Function.prototype.apply.call(fn, obj, args)，采用Reflect对象可以简化这种操作

const ages = [11, 33, 12, 54, 18, 96];

// 旧写法
const youngest = Math.min.apply(Math, ages);
const oldest = Math.max.apply(Math, ages);
const type = Object.prototype.toString.call(youngest);

// 新写法
const youngest = Reflect.apply(Math.min, Math, ages);
const oldest = Reflect.apply(Math.max, Math, ages);
const type = Reflect.apply(Object.prototype.toString, youngest, []);

ES6的Proxy和Reflect

介绍Proxy

Proxy语法

get

set

apply

其他

介绍Reflect

方法

更多资料