基本概念

字面意思的理解就是代理。

用于定义基本操作的自定义行为,就是我们可以自定义某些行为,比如属性的查找,赋值,枚举,函数调用等。
实际上我们利用这个Proxy实现对编程语言进行编程,就是把一些内部的方式,内置的方法改变了,这种编程就叫做语言编程。属性代理就做拦截。
关于Proxy需要注意的地方有:Proxy内部的this关键字的指向是Proxy代理本身;它的构建方式需要借助一个Proxy的构造函数new Proxy(target,handler),其中target叫做目标对象,Proxy构造函数返回的是一个包装过后的目标对象,handler是代理的行为的函数。

let handler = {    get: function(target, name) {        return name in target ? target[name] : 'Eric';    }};let p = new Proxy({}, handler);p.name;// Eric let proxy = new Proxy({}, {  get: function(target, property) {    return 'Eric';  }});let obj = Object.create(proxy);obj.name;// Eric    (说明Proxy是可以继承的)

代理操作

  • get, 拦截某个属性的读取操作,接收三个参数:target(目标对象)、property(属性名)、receiver(一般是Proxy对象本身,可选参数)

     let teacher = {   name: "Eric" };  let proxy = new Proxy(teacher, {   get: function(target, property) {     if (property in target) {       return target[property];     } else {       throw new ReferenceError("\"" + property + "\" does not exist.");     }   } });  proxy.name; // Eric  proxy.age; // ReferenceError: "age" does not exist. 

get属性拦截可以继承,需要注意的一点是,当某个对象不可配置(configurable)或者不可写(writable),使用get会报错。

  • set , 拦截某个属性的赋值操作

set属性有四个参数:target(目标对象)、property(属性名)、value(属性值)、receiver(Proxy实例本身,可选参数)

 let handler = {   set: function(obj, prop, value) {     //如果不是一个整数就抛出一个错误‘The value must an integer’     if (!Number.isInteger(value)) {       throw new TypeError('The value must an integer');     }     /* document.getElementById(prop).innerHTML = value */     obj[prop] = value;   } };  let teacher = new Proxy({}, handler); teacher.name = 'Eric'; // TypeError: The value must an integer 

同样的,在不可配置(configurable),不可写(writable)的里面,使用set不生效。

  • apply , 函数调用、call和apply拦截

apply接收三个参数:target(目标对象)、thisArg(目标对象this)、argumentsList(目标对象参数数组)

  var handler = {    apply (target, ctx, args) {      return Reflect.apply(...arguments);    }  };      let target = function () {    return 'I am Eric';  };    let handler = {    apply: function () {      return 'I am Iven';    }  };    let teacher = new Proxy(target, handler);  teacher();  // I am Iven
  • has, 拦截对象是否具有某个属性 - hasProperty

has有两个参数:target(目标对象)、prop(查询的属性名)。返回一个布尔值,true or false。

  let handler = {    has (target, key) {      if (key.startsWith('_')) {        return false;      }      return key in target;    }  };  let target = {    _property: 'private',    property: 'public'  };    let proxy = new Proxy(target, handler);  '_property' in proxy;  // false 

注意的点:has不拦截for in循环;对象不可配置(configurable)时,使用has会报错。

  • construct , 拦截new操作符

construct接收三个参数:target(目标对象)、argumentsList(构造函数参数)、newTarget(最初被调用的构造函数,为了方便能够得到原来构造函数想要得到的结构)。

  var handler = {    construct (target, args, newTarget) {      return new target(...args);    }  };      var teacher = new Proxy(    function () {},    {      construct: function(target, args) {        return { name: 'Eric' };      }    }  );  new teacher();  // { name: 'Eric' } 

注意:返回值必须是对象。

  • ownKeys , 拦截属性遍历

own只有一个参数:target(目标对象)。

  let target = {    Eric: 100,    Iven: 200,  };    let handler = {    ownKeys(target) {      return Reflect.ownKeys(target).filter(key => target[key] < 150);    }  };    let proxy = new Proxy(target, handler);  Object.keys(proxy);  // Eric 
  • deleteProperty , 拦截删除操作
  • deleteProperty接收两个参数:target(目标对象)、property(删除的属性名)。对象不可配置(configurable),使用deleteProperty会报错
  • defineProperty , 拦截Object.defineProperty
  • defineProperty接收三个参数:target(目标对象)、property(属性名)、descriptor(描述树)。属性不可扩展(non-extensible)会报错,不可配置(configurable)或者不可写(writable)使用defineProperty不生效。
  • getOwnPropertyDescriptor , 拦截Object.getOwnPropertyDescriptor getOwnPropertyDescriptor接收两个参数:target(目标对象)、prop(属性名称)。
  • getPrototypeOf , 拦截获取对象原型
  • getPrototypeOf 接收一个参数:target (目标对象)。必须返回对象或null。
  • isExtensible , 拦截Object.isExtensible
  • getPrototypeOf 接收一个参数:target (目标对象)。必须返回布尔值。
  • preventExtensions , 拦截Object.preventExtensions
  • preventExtensions 接收一个参数:target (目标对象)。必须返回一个布尔值。
  • setPrototypeOf , 拦截Object.setPrototypeOf
  • setPrototypeOf 接收两个参数:target (目标对象)、proto (原型对象)。

设置代理之后如何得到默认的行为?有两种方式,一种是Proxy代理取消,另一种是使用reflect。

Proxy代理取消

内部提供的方法:revocable

    let target = {};    let handler = {};    let { proxy, revoke } = Proxy.revocable(target, handler);    revoke();    proxy.name;    // ypeError: Cannot perform 'get' on a proxy that has been revoked