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