proxy的概念

proxy英文原意是代理的意思，在ES6中，可以翻译为"代理器"。

它主要用于改变某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作（后文会说明，有哪些操作可以拦截），必须通过这层拦截。

语法

var proxy = new Proxy(target, handler);

通过构造函数生成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);  }});

一般将handle参数说成配置对象，在配置对象中，可以定义需要拦截的操作。如果配置对象为空，那么对proxy的操作将直通目标对象。

对proxy操作才有拦截效果，而不是目标对象。

Proxy实例的方法

当读取不存在的属性时候，抛出错误而不是返回undefined

var person = {  name: "张三"};var proxy = new Proxy(person, {  get: function(target, property) {    if (property in target) {      return target[property];    } else {      throw new ReferenceError("Property \"" + property + "\" does not exist.");    }  }});proxy.name // "张三"proxy.age // 抛出一个错误

拦截读取继承属性

let proto = new Proxy({}, {  get(target, propertyKey, receiver) {    console.log('GET '+propertyKey);    return target[propertyKey];  }});let obj = Object.create(proto);obj.xxx // "GET xxx"

数组读取负数索引（负数索引表示倒着取数）

function createArray(...elements) {  let handler = {    get(target, propKey, receiver) {      let index = Number(propKey);      if (index < 0) {        propKey = String(target.length + index);      }      return Reflect.get(target, propKey, receiver);    }  };  let target = [];  target.push(...elements);  return new Proxy(target, handler);}let arr = createArray('a', 'b', 'c');arr[-1] // c

实现数据的限制

let validator = {  set: function(obj, prop, value) {    if (prop === 'age') {      if (!Number.isInteger(value)) {        throw new TypeError('The age is not an integer');      }      if (value > 200) {        throw new RangeError('The age seems invalid');      }    }    // 对于age以外的属性，直接保存    obj[prop] = value;  }};let person = new Proxy({}, validator);person.age = 100;person.age // 100person.age = 'young' // 报错person.age = 300 // 报错

防止内部属性“_”被外部读写（通常我们以下划线开头，表示其实内部属性）

var handler = {  get (target, key) {    invariant(key, 'get');    return target[key];  },  set (target, key, value) {    invariant(key, 'set');    target[key] = value;    return true;  }};function invariant (key, action) {  if (key[0] === '_') {    throw new Error(`Invalid attempt to ${action} private "${key}" property`);  }}var target = {};var proxy = new Proxy(target, handler);proxy._prop// Error: Invalid attempt to get private "_prop" propertyproxy._prop = 'c'// Error: Invalid attempt to set private "_prop" property

拦截——函数调用、call、apply操作

var twice = {  apply (target, ctx, args) {    return Reflect.apply(...arguments) * 2;  }};function sum (left, right) {  return left + right;};var proxy = new Proxy(sum, twice);proxy(1, 2) // 6proxy.call(null, 5, 6) // 22proxy.apply(null, [7, 8]) // 30

不对...in...循环生效

var handler = {  has (target, key) {    if (key[0] === '_') {      return false;    }    return key in target;  }};var target = { _prop: 'foo', prop: 'foo' };var proxy = new Proxy(target, handler);'_prop' in proxy // false

不对for...in...循环生效

let stu1 = {name: '张三', score: 59};let stu2 = {name: '李四', score: 99};let handler = {  has(target, prop) {    if (prop === 'score' && target[prop] < 60) {      console.log(`${target.name} 不及格`);      return false;    }    return prop in target;  }}let oproxy1 = new Proxy(stu1, handler);let oproxy2 = new Proxy(stu2, handler);'score' in oproxy1// 张三 不及格// false'score' in oproxy2// truefor (let a in oproxy1) {  console.log(oproxy1[a]);}// 张三// 59for (let b in oproxy2) {  console.log(oproxy2[b]);}// 李四// 99

拦截object.keys()方法

let target = {  a: 1,  b: 2,  c: 3};let handler = {  ownKeys(target) {    return ['a'];  }};let proxy = new Proxy(target, handler);Object.keys(proxy)// [ 'a' ]

本文来源