ES6新特性之Proxy

jiezi

5 年前

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

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

内部提供的方法：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

ES6新特性之Proxy

基本概念

代理操作

Proxy 代理取消