Proxy

概述

Proxy在目标对象之前架设一层"拦截",外界对该对象访问必须先通过这层拦截.因此提供了一种极致,可以对外界的访问进行过滤和修改.
ES6原生提供Proxy构造函数

var proxy = new Proxy(target, handler);

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

target参数表示所要拦截的目标对象(如果是一个空对象,即没有Proxy的介入,操作原来要访问的就是这个对象)handler参数也是一个对象,用来定制拦截行为
注意,要使得Proxy起作用,必须针对Proxy实例进行操作,而不是针对目标对象进行操作(操作的不是target参数代表的对象)
Proxy实例可以作为其他对象的原型对象
Proxy支持的拦截操作:

• get(target, propKey, receiver):拦截对象属性的读取
  参数分别为目标对象,属性名和proxy实例本身,其中最后一个参数可选
  get方法可以继承

• set(target,propKey,value,receiver):拦截对象属性的设置,返回一个布尔值
  参数分别是目标对象,属性名,属性值和proxy实例本身,最后一个参数可选
  注意:如果目标对象自身的某个属性,不可写或不可配置,那么set方法将不起作用

• has(target,propKey):拦截propKey in proxy的操作,返回一个布尔值
  has方法用来拦截HasProperty操作,判断对象是否具有某个属性时,这个方法会生效
  如果源对象不可配合或者禁止拓展,这时has拦截会报错

• deleteProperty(target,propKey):拦截delete proxy[propKey]的操作,返回一个布尔值
  如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除
  注意:目标对象自身的不可配置的属性,不能被deleteProperty方法删除,否则会报错

• ownKeys(target):拦截Object.getOwnPropertyNames(proxy),Object.getOwnPropertySymbols(proxy),Object.keys(proxy),返回一个数组.该方法返回目标对象所有自身的属性的属性名,二Object.keys()的返回结果仅包括目标对象自身的可遍历属性
  使用该方法时,有三类属性会被自动过滤,不会返回

  • 目标对象上不存在的属性
  • 属性名为Symbol值
  • 不可遍历的属性
    如果目标对象自身包含不可配置的属性,则该属性必须被返回不然会报错
    另外,如果目标对象是不可拓展的,返回值中必须包含源对象的所有属性,且不能包含多余的属性

• getOwnPropertyDescriptor(target,propKey):拦截Object.getOwnPropertyDescriptor(proxy,propKey),返回属性的描述对象

• defineProperty(target,propKey,propDesc):拦截Object.defineProperty(proxy,propKey,propDesc),Object.defineProperties(proxy,propDescs),返回一个布尔值
  注意:如果目标对象不可拓展,则不能增加目标对象不存在的属性,否则会报错.另外如果目标对象的某个属性不可写或不可配置,则不得改变这两个设置

• preventExtensions(target):拦截Object,preventExtensions(proxy),返回一个布尔值
  只有目标对象不可拓展时,才能返回true.为了防止报错,通常在返回true之前调用一次Object.preventExtensions

• getprototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象

• isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值
  这个方法有一个强限制,它的返回值必须与目标对象的isExtensible属性保持一致,否则就会抛出错误

• setPrototypeOf(target,proto):拦截Object.setPrototype(proxy,proto),返回一个布尔值.如果目标对象是函数,那么还有两种额外操作可以拦截.

• apply(target,object,args):拦截Proxy实例作为函数调用的操作,比如proxy(...args),proxy.call(object, ...args),proxy.apply(...)
  apply方法拦截函数的调用,call和apply操作
  参数分别是目标对象,目标对象的上下文对象(this)和目标对象的参数数组

• construct(target,args):拦截Proxy实例作为构造函数调用的操作,比如new Proxy(...args)
  用于拦截new命令,参数分别为目标对象,构建函数的参数对象
  construct方法返回的必须是一个对象,否则会报错

Proxy.revocable

返回一个对象,该对象的proxy属性是proxy实例,revoke属性是一个函数,可以取消proxy实例

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

Reflect

概述

Reflect对象与Proxy对象一样,是ES6为了操作对象而提供的新API.设计目的以下:

1. 将Object对象的一些明显属于语言内部的方法,放到Reflect对象上
2. 修改某些Object方法的返回结果,将其变得更合理
3. 让Object操作都变成函数行为
4. Reflect对象的方法和Proxy对象的方法一一对应,让Proxy对象可以方便的调用对应的Reflect方法,完全变成默认行为
   <观察者模式指的事函数自动观察数据对象,一旦对象有变化,函数就会自动执行>