ES6新特性之Proxy

基本概念

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

用于定义基本操作的自定义行为，就是我们可以自定义某些行为，比如属性的查找，赋值，枚举，函数调用等。
实际上我们利用这个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 

转载于:https://my.oschina.net/u/4144971/blog/3095660