JavaScript 代理与反射

  const target = {
    id: 'target'
  };
  const handle = {};
  const proxy = new Proxy(target, handle);
  // id属性会访问同一个值
  console.log(target.id);
  console.log(proxy.id);
  // 给目标属性赋值会反映在两个对象上
  // 因为两个对象访问的是同一个值
  target.id = 'foo';
  console.log(target.id); // foo
  console.log(proxy.id); // foo
  // 给代理属性赋值会反映在两个对象上
  // 因为这个赋值会转移到目标对象
  proxy.id = 'bar';
  console.log(target.id); // bar
  console.log(proxy.id); // bar
  // hasOwnProperty() 方法在两个地方都会应用到目标对象
  console.log(target.hasOwnProperty('id')); // true
  console.log(proxy.hasOwnProperty('id')); // true
  // 严格相等可以用来区分代理和目标
  console.log(target === proxy); // false

1.2 定义捕获器

使用代理的主要目的是可以定义捕获器（trap）。

捕获器就是在处理程序对象中定义的“基本操作的拦截器”。

每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。

每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

定义一个get()捕获器。

注意，只有在代理对象上执行这些操作才会触发捕获器。

  const target = {
    foo: 'bar'
  };
  const handler = {
    // 捕获器在处理程序对象中以方法名为键
    get() {
      return 'handler override';
    }
  };
  const proxy = new Proxy(target, handler);
  console.log(target.foo); // bar
  console.log(proxy.foo); // handler override

  console.log(target['foo']); // bar
  console.log(proxy['foo']); // handler override

1.3 捕获器参数和反射API

get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数

  const target = {
    foo: 'bar'
  };
  const handler = {
    get (trapTarget, property, receiver) {
      console.log(trapTarget === target);
      console.log(property);
      console.log(receiver === proxy);
    }
  }
  const proxy = new Proxy(target, handler);
  proxy.foo;
  // true
  // foo
  // true

反射API

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API的同名方法。

  const target = {
    foo: 'bar'
  };
  const handler = {
    get () {
      return Reflect.get(...arguments) +' test';
    }
    // 简写(不如不写，仅能返回”值“，不能装饰）
    // get:Reflect.get
  }
  const proxy = new Proxy(target, handler);
  console.log(proxy.foo); // foo
  console.log(target.foo); // foo

1.4 捕获器不变式

使用捕获器几乎可以改变所有基本方法的行为，但也不是没有限制。

捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant）。

捕获器不变式因方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。

比如，如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出TypeError：

  const target = {};
  Object.defineProperty(target, 'foo', {
    configurable: false,
    writable: false,
    value: 'bar'
  });
  const handler = {
    get() {
      return 'test'
    }
  };
  const proxy = new Proxy(target, handler);
  console.log(proxy.foo); // TypeEroor

1.5 可撤销代理

revocable()方法，这个方法支持撤销代理对象与目标对象的关联。

撤销函数revoke()是幂等的，调用多少次的结果都一样。

撤销代理之后再调用代理会抛出TypeError。

注：没有new关键字

  const target = {
    foo: 'bar'
  };
  const handler = {
    get() {
      return 'test'
    }
  };
  const {proxy, revoke} = Proxy.revocable(target, handler);
  console.log(proxy.foo); // test
  console.log(target.foo); // bar
  revoke();
  console.log(proxy.foo); // TypeError

1.6 实用反射API

某些情况下应该优先使用反射API

1.6.1 反射API与对象API

在使用反射API时，要记住：

1. 反射API不限于捕获处理程序

2. 大多数反射API方法在Object类型上有对应的方法。

Object上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。

1.6.2 状态标记（书中举例造成歧义）

很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。

在定义新属性时如果发生问题，Reflect.defineProperty()会返回false，而不是抛出错误。

例如，可以使用反射API对下面的代码进行重构：

书中举例：

  // 初始代码
  const o = {};
  try {
    Object.defineProperty(o, 'foo', 'bar');
    console.log('success');
  } catch (e) {
    console.log('failure');
  }
  // 输出 failure

  // 使用Reflect重构
  if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) {
    console.log('success');
  } else {
    console.log('failure');
  }
  // 输出 success

槽点：没有用相同操作进行举例，如下1和2两条关键代码

// 1.语法本身就有问题
Object.defineProperty(o, 'foo', 'bar'); 
// 2.返回状态标记true
Reflect.defineProperty(o, 'foo', {value: 'bar'})；
// 3.会抛出错误，没有返回false，本身语法就有问题，肯定报错
// 书中举例造成理解歧义，以为用了Reflect.defineProperty就不会抛出错误
Reflect.defineProperty(o, 'foo', 'bar')；

更正举例：

事先添加属性foo,并设置为不可写，为Reflect.defineProperty返回false创造条件

  // 初始代码
  const o = {};
  Object.defineProperty(o, 'foo', {
    writable: false
  })

  try {
    Object.defineProperty(o, 'foo', {value: 'bar'});
    console.log('success');
  } catch (e) {
    console.log('failure');
  }
  // 输出 failure

  // 使用Reflect重构
  let statusMark = Reflect.defineProperty(o, 'foo', {value: 'bar'})
  if(statusMark) {
    console.log('success');
  } else {
    console.log('failure');
  }
  // 输出 failure

以下反射方法都会提供状态标记

Reflect.defineProperty()

Reflect.preventExtensions()

Reflect.setPrototypeOf()

Reflect.set()

Reflect.deleteProperty()

1.6.3 用一等函数替代操作符

优点：如1.6.2

Reflect.get()：可以替代对象属性访问操作符。

Reflect.set()：可以替代=赋值操作符。

Reflect.has()：可以替代in操作符或with()。

Reflect.deleteProperty()：可以替代delete操作符。

Reflect.construct()：可以替代new操作符。

1.6.4 安全的应用函数

在通过apply方法调用函数时，被调用的函数可能也定义了自己的apply属性（虽然可能性极小）。为绕过这个问题，可以使用定义在Function原型上的apply方法，比如：

Function.prototype.apply.call(myFunc, thisVal, argumentList);

更好的方法（原型也省了）

Reflect.apply(myFunc, thisVal, argumentsList);

1.7 代理另一个代理

代理可以拦截反射API的操作，而这意味着完全可以创建一个代理，通过它去代理另一个代理。

这样就可以在一个目标对象之上构建多层拦截网：

const target = {
  foo: 'bar'
};
const firstProxy = new Proxy(target, {
  get() {
    console.log("first proxy");
    return Reflect.get(...arguments);
  }
});
const secondProxy = new Proxy(firstProxy, {
  get () {
    console.log("second proxy");
    return Reflect.get(...arguments);
  }
});
console.log(secondProxy.foo);
// second proxy
// first proxy
// bar

1.8 代理的问题与不足

在某些情况下，代理不能与现在的ECMAScript机制很好地协同。

1.8.1 代理中的this

方法中的this通常指向调用这个方法的对象：

  const target = {
    thisValEqualsProxy() {
      return this === proxy;
    }
  }
  const proxy = new Proxy(target, {});
  console.log(target.thisValEqualsProxy()); // false
  console.log(proxy.thisValEqualsProxy()); // true

如果目标对象依赖于对象标识，this就会出现问题

  const wm = new WeakMap();
  class User {
    constructor(userId) {
      wm.set(this, userId)
    }
    set id(userId) {
      wm.set(this, userId);
    }
    get id() {
      return wm.get(this);
    }
  }
  // 由于这个实现依赖User实例的对象标识，在这个实例被代理的情况下就会出问题
  const user = new User(123);
  console.log(user.id); // 123
  const userInstanceProxy = new Proxy(user, {});
  console.log(userInstanceProxy.id); // undefined

  // 这是因为User实例一开始使用目标对象作为WeakMap的键，代理对象却尝试从自身取得这个实例
  // 解决方法
  // 把代理User实例改为代理User本身，然后再创建代理的实例
  // 这样就会以代理实例作为WeakMap的键了
  const UserClassProxy = new Proxy(User, {});
  const ProxyUser = new UserClassProxy(456);
  console.log(ProxyUser.id); // 456

1.8.2 代理与内部槽位

根据ECMAScript规范，Date类型方法的执行，依赖this值上的内部槽位[[NumberDate]]。

代理对象上不存在这个内部槽位，而且内部槽位的值也不能通过普通的get()和set()操作访问到。

于是代理拦截后，本应转发给目标对象的方法会抛出TypeError：

  const target = new Date();
  const proxy = new Proxy(target, {});
  console.log(proxy instanceof Date); // true
  proxy.getDate(); // TypeError: 'this' is not a Date object

2. 代理捕获器与反射方法

代理可以捕获13种不同的基本操作。

这些操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。

2.1 get()-!bool

get()捕获器会在获取属性值的操作中被调用。

对应的反射API方法为Reflect.get()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    get (trapTarget, property, receiver) {
      console.log('get()')
      return Reflect.get(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  proxy.foo
  // get();

1. 返回值无限制

2. 拦截的操作

proxy.property

proxy[property]

Object.create(proxy)[property]

Reflect.get(proxy,property,receiver)

3. 捕获器处理程序参数

trapTarget: 目标对象

property: 目标对象上的属性

receiver: 代理对象或继承代理对象的对象

4. 捕获器不定式

如果target.property不可写且不可配置，则处理程序返回的值必须与target.property匹配。

如果target.property不可配置且[[Get]]特性为undefined，处理程序的返回值也必须是undefined。

2.2 set()

set()捕获器会在设置属性值的操作中被调用。

对应的反射API方法为Reflect.set()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    set (trapTarget, property, value, receiver) {
      console.log('set()')
      return Reflect.set(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  proxy.foo = 'foo';
  // set();

1. 返回值

返回true表示成功；返回false表示失败，严格模式下会抛出TypeError。

2. 拦截的操作

proxy.property = value

proxy[property] = value

Object.create(proxy)[property] = value

Reflect.set(proxy,property,value,receiver)

3.捕获器处理程序参数

trapTarget: 目标对象

property: 目标对象上的属性

value: 要赋给属性的值

receiver: 接收最初赋值的对象

4. 捕获器不变式

如果target.property不可写且不可配置，则不能修改目标属性的值。

如果target.property不可配置且[[Set]]特性为undefined，则不能修改目标属性的值。

在严格模式下，处理程序中返回false会抛出TypeError。

2.3 has()

has()捕获器会在in操作符中被调用。对应的反射API方法为Reflect.has()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    has (trapTarget, property) {
      console.log('has()')
      return Reflect.has(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  'foo' in proxy;
  // has();

1. 返回值

has()必须返回布尔值，表示属性是否存在。返回非布尔值会被转型为布尔值。

2.拦截的操作

property in proxy

property in Object.create(proxy)

with(proxy) {(property); }

Reflect.has(proxy, property)

3.捕获器处理程序参数

TrapTarget：目标对象。

property: 目标对象上的属性

4. 捕获器不变式

如果target.property存在且不可配置，则处理程序必须返回true。

如果target.property存在且目标对象不可扩展，则处理程序必须返回true。

2.4 difineProperty()

defineProperty()捕获器会在Object.defineProperty()中被调用。

对应的反射API方法为Reflect.defineProperty()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    defineProperty(trapTarget, property, descriptor) {
      console.log("defineProperty()");
      return Reflect.defineProperty(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.defineProperty(proxy, 'foo', {value: 'bar'});
  // defineProperty();

1. 返回值

defineProperty()必须返回布尔值，表示属性是否成功定义。返回非布尔值会被转型为布尔值。

2.拦截的操作

Object.defineProperty(proxy, property, descriptor)

Reflect.defineProperty(proxy, property, descriptor)

3.捕获器处理程序参数

TrapTarget：目标对象。

property: 目标对象上的属性

descriptor：包含可选的enumerable、configurable、writable、value、get和set定义的对象。

4. 捕获器不变式

如果目标对象不可扩展，则无法定义属性。

如果目标对象有一个可配置的属性，则不能添加同名的不可配置属性。

如果目标对象有一个不可配置的属性，则不能添加同名的可配置属性。

一句话概括，不可更改目标对象的固有配置，只能装饰。

2.5 getOwnPropertyDescriptor()-!bool

getOwnPropertyDescriptor()捕获器会在Object.getOwnPropertyDescriptor()中被调用。

对应的反射API方法为Reflect.getOwnPropertyDescriptor()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    getOwnPropertyDescriptor(trapTarget, property) {
      console.log("getOwnPropertyDescriptor()");
      return Reflect.getOwnPropertyDescriptor(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.getOwnPropertyDescriptor(proxy, 'foo');
  // getOwnPropertyDescriptor();

1. 返回值

getOwnPropertyDescriptor()必须返回对象，或者在属性不存在时返回undefined。

2.拦截的操作

Object.getOwnPropertyDescriptor(proxy, property)

Reflect.getOwnPropertyDescriptor(proxy, property)

3.捕获器处理程序参数

TrapTarget：目标对象。

property: 目标对象上的属性

4. 捕获器不变式

如果自有的target.property存在且不可配置，则处理程序必须返回一个表示该属性存在的对象。

如果自有的target.property存在且可配置，则处理程序必须返回表示该属性可配置的对象。

如果自有的target.property存在且target不可扩展，则处理程序必须返回一个表示该属性存在的对象。

如果target.property不存在且target不可扩展，则处理程序必须返回undefined表示该属性不存在。

如果target.property不存在，则处理程序不能返回表示该属性可配置的对象。

2.6 deleteProperty()

deleteProperty()捕获器会在delete操作符中被调用。对应的反射API方法为Reflect. deleteProperty()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    deleteProperty(trapTarget, property) {
      console.log("deleteProperty()");
      return Reflect.deleteProperty(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  delete proxy.foo;
  // deleteProperty();

1. 返回值

deleteProperty()必须返回布尔值，表示删除属性是否成功。返回非布尔值会被转型为布尔值。

2.拦截的操作

delete proxy.property

delete proxy[property]

Reflect.deleteProperty(proxy, property)

3.捕获器处理程序参数

TrapTarget：目标对象。

property: 目标对象上的属性

4. 捕获器不变式

如果自有的target.property存在且不可配置，则处理程序不能删除这个属性。

2.7 ownKeys()-!bool

ownKeys()捕获器会在Object.keys()及类似方法中被调用。对应的反射API方法为Reflect. ownKeys()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    ownKeys(trapTarget) {
      console.log("ownKeys()");
      return Reflect.ownKeys(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.keys(proxy);
  // ownKeys();

1. 返回值

ownKeys()必须返回包含字符串或符号的可枚举对象。

2.拦截的操作

Object.getOwnPropertyNames(proxy)

Object.getOwnPropertySymbols(proxy)

Object.keys(proxy)

Reflect.ownKeys(proxy)

3.捕获器处理程序参数

TrapTarget：目标对象。

4. 捕获器不变式

返回的可枚举对象必须包含target的所有不可配置的自有属性。

如果target不可扩展，则返回可枚举对象必须准确地包含自有属性键。

2.8 getPrototypeOf()-!bool

getPrototypeOf()捕获器会在Object.getPrototypeOf()中被调用。

对应的反射API方法为Reflect.getPrototypeOf()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    getPrototypeOf(trapTarget) {
      console.log("getPrototypeOf()");
      return Reflect.getPrototypeOf(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.getPrototypeOf(proxy);
  // getPrototypeOf();

1. 返回值

getPrototypeOf()必须返回对象或null。

2.拦截的操作

Object.getPrototypeOf(proxy)

Reflect.getPrototypeOf(proxy)

proxy.__proto__

Object.prototype.isPrototypeOf(proxy)

proxy instanceof Object

3.捕获器处理程序参数

TrapTarget：目标对象。

4. 捕获器不变式

如果target不可扩展，则Object.getPrototypeOf(proxy)唯一有效的返回值就是Object. getPrototypeOf(target)的返回值。

2.9 setPrototypeOf()

setPrototypeOf()捕获器会在Object.setPrototypeOf()中被调用。

对应的反射API方法为Reflect.setPrototypeOf()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    setPrototypeOf(trapTarget, prototype) {
      console.log("setPrototypeOf()");
      return Reflect.setPrototypeOf(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.setPrototypeOf(proxy, Object);
  // setPrototypeOf();

1. 返回值

setPrototypeOf()必须返回布尔值，表示原型赋值是否成功。返回非布尔值会被转型为布尔值。

2.拦截的操作

Object.setPrototypeOf(proxy)

Reflect.setPrototypeOf(proxy)

3.捕获器处理程序参数

TrapTarget：目标对象。

prototype:target的替代原型，如果是顶级原型则为null。

4. 捕获器不变式

如果target不可扩展，则唯一有效的prototype参数就是Object.getPrototypeOf(target)的返回值。

2.10 isExtensible()

isExtensible()捕获器会在Object.isExtensible()中被调用。对应的反射API方法为Reflect.isExtensible()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    isExtensible(trapTarget) {
      console.log("isExtensible()");
      return Reflect.isExtensible(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.isExtensible(proxy);
  // isExtensible();

1. 返回值

isExtensible()必须返回布尔值，表示target是否可扩展。返回非布尔值会被转型为布尔值。

2.拦截的操作

Object.isExtensible(proxy)

Reflect.isExtensible(proxy)

3.捕获器处理程序参数

TrapTarget：目标对象。

4. 捕获器不变式

如果target可扩展，则处理程序必须返回true, 反之false。

2.11 preventExtensions()

preventExtensions()捕获器会在Object.preventExtensions()中被调用。对应的反射API方法为Reflect.preventExtensions()。

  const target = {
    foo: 'bar'
  };
  const handler = {
    preventExtensions(trapTarget) {
      console.log("preventExtensions()");
      return Reflect.preventExtensions(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  Object.preventExtensions(proxy);
  // preventExtensions();

1. 返回值

preventExtensions()必须返回布尔值，表示target是否已经不可扩展。返回非布尔值会被转型为布尔值。

2.拦截的操作

Object.preventExtensions(proxy)

Reflect.preventExtensions(proxy)

3.捕获器处理程序参数

TrapTarget：目标对象。

4. 捕获器不变式

如果Object.isExtensible(proxy)是false，则处理程序必须返回true。

2.12 apply()-!bool

apply()捕获器会在调用函数时中被调用。对应的反射API方法为Reflect.apply()。

  const target = () => {
    foo: 'bar'
  };
  const handler = {
    apply(trapTarget, thisArg, ...argumentsList) {
      console.log("apply()");
      return Reflect.apply(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  proxy();
  // apply();

1. 返回值无限制

2.拦截的操作

proxy(...argumentsList)

Function.prototype.apply(thisArg, argumentsList)

Function.prototype.call(thisArg, ...argumentsList)

Reflect.apply(target, thisArgument, argumentsList)

3.捕获器处理程序参数

TrapTarget：目标对象。

thisArg：调用函数时的this参数。

argumentsList：调用函数时的参数列表

4. 捕获器不变式

target必须是一个函数对象。

2.13 construct()-!bool

construct()捕获器会在new操作符中被调用。对应的反射API方法为Reflect.construct()。

  const target = function() {
    foo: 'bar'
  };
  const handler = {
    construct(trapTarget, argumentsList, newTarget) {
      console.log("construct()");
      return Reflect.construct(...arguments);
    }
  };
  const proxy = new Proxy(target, handler);
  new proxy;
  // construct();

1. 返回值

construct()必须返回一个对象。

2.拦截的操作

new proxy(...argumentsList)

Reflect.construct(target, argumentsList, newTarget)

3.捕获器处理程序参数

TrapTarget：目标构造函数。

argumentsList：传给目标构造函数的参数列表。

newTarget：最初被调用的构造函数。

4. 捕获器不变式

target必须可以用作构造函数。

3. 代理模式

使用代理可以在代码中实现一些有用的编程模式。

3.1 跟踪属性访问

通过捕获get、set和has等操作，可以知道对象属性什么时候被访问、被查询。

  const user = {
    name: 'jie'
  };
  const proxy = new Proxy(user, {
    get (target, property, receiver) {
      console.log(`Getting ${property}`);
      return Reflect.get(...arguments);
    },
    set (target, property, value, receiver) {
      console.log(`Setting ${property} = ${value}`);
      return Reflect.set(...arguments);
    }
  });
  proxy.name; // Getting jie
  proxy.age = 99; // Setting age = 99;

3.2 隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举。比如：

const hiddenProperties = ['foo', 'bar'];
const targetObject = {
  foo: 1,
  bar: 2,
  baz: 3
};
const proxy = new Proxy(targetObject, {
  get(target, property) {
    if (hiddenProperties.includes(property)) {
      return undefined;
    } else {
      return Reflect.get(...arguments);
    }
  },
  has(target, property) {
    if (hiddenProperties.includes(property)) {
      return false;
    } else {
      return Reflect.has(...arguments);
    }
  }
});
// get()
console.log(proxy.foo);   // undefined
console.log(proxy.bar);   // undefined
console.log(proxy.baz);   // 3
// has()
console.log('foo' in proxy);   // false
console.log('bar' in proxy);   // false
console.log('baz' in proxy);   // true

3.3 属性验证

因为所有赋值操作都会触发set()捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值：

const target = {
  onlyNumbersGoHere: 0
};
const proxy = new Proxy(target, {
  set(target, property, value) {
    if (typeof value !== 'number') {
      return false;
    } else {
      return Reflect.set(...arguments);
    }
  }
});
proxy.onlyNumbersGoHere = 1;
console.log(proxy.onlyNumbersGoHere);   // 1
proxy.onlyNumbersGoHere = '2'; // 严格模式下抛出TypeError
console.log(proxy.onlyNumbersGoHere);   // 1

3.4 函数与构造函数参数验证

跟保护和验证对象属性类似，也可对函数和构造函数参数进行审查。

比如，可以让函数只接收某种类型的值：

function median(...nums) {
  return nums.sort()[Math.floor(nums.length / 2)];
}
const proxy = new Proxy(median, {
  apply(target, thisArg, argumentsList) {
    for (const arg of argumentsList) {
      if (typeof arg !== 'number') {
        throw 'Non-number argument provided';
      }
    }
    return Reflect.apply(...arguments);
  }
});
console.log(proxy(4, 7, 1));   // 4
console.log(proxy(4, '7', 1));
// Error: Non-number argument provided

类似地，可以要求实例化时必须给构造函数传参：

class User {
  constructor(id) {
    this.id_ = id;
  }
}
const proxy = new Proxy(User, {
  construct(target, argumentsList, newTarget) {
    if (argumentsList[0] === undefined) {
      throw 'User cannot be instantiated without id';
    } else {
      console.log(argumentsList); // [1]
      return Reflect.construct(...arguments);
    }
  }
});
new proxy(1);
new proxy();
// Error: User cannot be instantiated without id

3.5 数据绑定与可观察对象

通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。

比如，可以将被代理的类绑定到一个全局实例集合，让所有创建的实例都被添加到这个集合中：

const userList = [];
class User {
  constructor(name) {
    this.name_ = name;
  }
}
const proxy = new Proxy(User, {
  construct() {
    const newUser = Reflect.construct(...arguments);
    userList.push(newUser);
    return newUser;
  }
});
new proxy('John');
new proxy('Jacob');
new proxy('Jingleheimerschmidt');
console.log(userList); // [User {}, User {}, User{}]

还可以把集合绑定到一个事件分派程序，每次插入新实例时都会发送消息：

const userList = [];
function emit(newValue) {
  console.log(newValue);
}
const proxy = new Proxy(userList, {
  set(target, property, value, receiver) {
    const result = Reflect.set(...arguments);
    if (result) {
      emit(Reflect.get(target, property, receiver));
    }
    return result;
  }
});
proxy.push('John');
// John
// 1
proxy.push('Jacob');
// Jacob
// 2
proxy.push('test');
// test
// 3