JavaScript高级程序设计第四版学习--第九章_javascript 内部槽-优快云博客

本文链接：https://blog.youkuaiyun.com/one_punchman_zxl/article/details/117122463

title: JavaScript高级程序设计第四版学习–第九章
date: 2021-5-21 15:03:59
author: Xilong88
tags: JavaScript

本章内容
章内容
代理基础
代码捕获器与反射方法
代理模式
可能出现的面试题：
1.了解过代理，捕获器，反射吗？
2.介绍常见的捕获器与反射方法。
3.介绍几种代理的用处

总结：代理，反射，这些是ES6中的新方法，看完之后感觉在开发中可以实现很多功能，就像书上提到的：跟踪属性访问、隐藏属性、阻止修改或删除属性、函数参数验证、构造函数参数验证、数据绑定，以及可观察对象。
这些都会让JavaScript的能力变得更强大，感觉学好了可以解决更多常景的业务，同样我觉得框架里面肯定有很多这种方法的使用，学了这一章就可以不至于看不懂框架里涉及到的代理反射。
知识点：

1.代理

创建空代理：

最简单的代理是空代理，即除了作为一个抽象的目标对象，什么也不做。默认情况下，在代理对象上执行的所有操作都会无障碍地传播到目标对象。

构造函数接收两个参数：目标对象和处理程序对象。缺少其中任何一个参数都会抛出TypeError 。

const target = {
  id: 'target'
};
const handler = {};
const proxy = new Proxy(target, handler);
// id属性会访问同一个值
console.log(target.id);  // target
console.log(proxy.id);   // target
// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
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
// Proxy.prototype是undefined
// 因此不能使用instanceof操作符
console.log(target instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(proxy instanceof Proxy);  // TypeError: Function has non-object prototype 'undefined' in instanceof check
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false

定义捕获器
每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。
也就是说处理程序里用的捕获器会在某些条件下被触发，然后就可以进行相应的处理。

下面的例子定义了一个get() 捕获器：

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

捕获器参数和反射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

有了这些参数，就可以重建被捕获方法的原始行为：

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

不是所有的捕获器都像上面的get那么简单，所以提供了全局Reflect对象，这上面封装了原始行为，可以轻松重建方法。

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API方
法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也
具有与被拦截方法相同的行为。因此，使用反射API也可以像下面这样
定义出空代理对象：

const target = {
  foo: 'bar'
};
const handler = {

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

甚至还可以写得更简洁一些：

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

事实上，如果真想创建一个可以捕获所有方法，然后将每个方法转发给
对应反射API的空代理，那么甚至不需要定义处理程序对象：

const target = {
  foo: 'bar'
};
const proxy = new Proxy(target, Reflect);
console.log(proxy.foo);   // bar
console.log(target.foo);  // bar

反射API为开发者准备好了样板代码，在此基础上开发者可以用最少的
代码修改捕获的方法。比如，下面的代码在某个属性被访问时，会对返
回的值进行一番修饰：

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

捕获器不变式

每个捕获的方法都知道目标对象上下文、捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant）。捕获器不变式因方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。

也就是说，捕获器不变式就是对捕获器的一些限制条件

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

const target = {};
Object.defineProperty(target, 'foo', {
  configurable: false,
  writable: false,
  value: 'bar'
});
const handler = {

  get() {
    return 'qux';
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo);
// TypeError

可撤销代理

Proxy 暴露了revocable() 方法，这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且，撤销函数（revoke() ）是幂等的，调用多少次的结果都一样。撤销代理之后再调用代理会抛出TypeError 。

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

实用反射API

(1) 反射API并不限于捕获处理程序；
(2) 大多数反射API方法在Object 类型上有对应的方法。通常，Object 上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。

状态标记

很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。有时候，状态标记比那些返回修改后的对象或者抛出错误（取决于方法）的反射API方法更有用。例如，可以使用反射API对下面的代码进行重构：

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

在定义新属性时如果发生问题，Reflect.defineProperty() 会返回false ，而不是抛出错误。因此使用这个反射方法可以这样重构上面的代码：

// 重构后的代码

const o = {};
if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) {
  console.log('success');
} else {
  console.log('failure');
}

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

Reflect.defineProperty()
Reflect.preventExtensions()
Reflect.setPrototypeOf()
Reflect.set()
Reflect.deleteProperty()

用一等函数替代操作符

以下反射方法提供只有通过操作符才能完成的操作。

Reflect.get() ：可以替代对象属性访问操作符。
Reflect.set() ：可以替代= 赋值操作符。
Reflect.has() ：可以替代in 操作符或with() 。
Reflect.deleteProperty()：可以替代delete 操作符。
Reflect.construct() ：可以替代new 操作符。

安全地应用函数

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

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

这种可怕的代码完全可以使用Reflect.apply 来避免：

Reflect.apply(myFunc, thisVal, argumentsList);

代理另一个代理

代理可以拦截反射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.代理中的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);
  }
}

const user = new User(123);
console.log(user.id); // 123
const userInstanceProxy = new Proxy(user, {});
console.log(userInstanceProxy.id); // undefined
这是因为User 实例一开始使用目标对象作为WeakM

这是因为User 实例一开始使用目标对象作为WeakMap 的键，代理对象却尝试从自身取得这个实例。要解决这个问题，就需要重新配置代理，把代理User 实例改为代理User 类本身。之后再创建代
理的实例就会以代理实例作为WeakMap 的键了：

const UserClassProxy = new Proxy(User, {});
const proxyUser = new UserClassProxy(456);
console.log(proxyUser.id);

2.代理与内部槽位

代理与内置引用类型（比如Array ）的实例通常可以很好地协同，但有些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操作和不变式

1.get()

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

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

返回值

返回值无限制。

拦截的操作

proxy.property
proxy[property]
Object.create(proxy)[property]
Reflect.get(proxy, property, receiver)

捕获器处理程序参数

target ：目标对象。
property ：引用的目标对象上的字符串键或符号属性。
receiver ：代理对象或继承代理对象的对象。

捕获器不变式

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

2.set()

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

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

返回值

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

拦截的操作

proxy.property = value
proxy[property] = value
Object.create(proxy)[property] = value
Reflect.set(proxy, property,value, receiver)

捕获器处理程序参数

target ：目标对象。
property ：引用的目标对象上的字符串键属性。
value ：要赋给属性的值。
receiver：接收最初赋值的对象。

捕获器不变式

如果target.property 不可写且不可配置，则不能修改目标属性的值。
如果target.property不可配置且[[Set]] 特性为undefined ，则不能修改目标属性的值。在严格模式下，处理程序中返回false会抛出TypeError 。

3. has()

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

const myTarget = {};
const proxy = new Proxy(myTarget, {
  has(target, property) {

    console.log('has()');
    return Reflect.has(...arguments)
  }
});
'foo' in proxy;
// has()

返回值

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

拦截的操作

property in proxy
property in Object.create(proxy)
with(proxy){(property);}
Reflect.has(proxy, property)

捕获器处理程序参数

target ：目标对象。
property ：引用的目标对象上的字符串键属性。

捕获器不变式

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

4 .defineProperty()

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

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

返回值

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

拦截的操作

Object.defineProperty(proxy, property, descriptor)
Reflect.defineProperty(proxy, property, descriptor)

捕获器处理程序参数

target ：目标对象。
property ：引用的目标对象上的字符串键属性。
descriptor ：包含可选的enumerable 、configurable、writable 、value 、get 和set 定义的对象。

捕获器不变式

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

5 .getOwnPropertyDescriptor()

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

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

返回值

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

拦截的操作

Object.getOwnPropertyDescriptor(proxy, property)
Reflect.getOwnPropertyDescriptor(proxy, property)

捕获器处理程序参数

target ：目标对象。

property ：引用的目标对象上的字符串键属性。

捕获器不变式

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

6.deleteProperty()

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

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

返回值

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

拦截的操作

delete proxy.property
delete proxy[property]
Reflect.deleteProperty(proxy, property)

捕获器处理程序参数

target ：目标对象。
property ：引用的目标对象上的字符串键属性。

捕获器不变式

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

7.ownKeys()

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

const myTarget = {};
const proxy = new Proxy(myTarget, {
  ownKeys(target) {
    console.log('ownKeys()');
    return Reflect.ownKeys(...arguments)
  }
});
Object.keys(proxy);
// ownKeys()

返回值

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

拦截的操作

Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
Reflect.ownKeys(proxy)

捕获器处理程序参数

target ：目标对象。

捕获器不变式

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

8 .getPrototypeOf()

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

const myTarget = {};
const proxy = new Proxy(myTarget, {
  getPrototypeOf(target) {
    console.log('getPrototypeOf()');
    return Reflect.getPrototypeOf(...arguments)
  }
});
Object.getPrototypeOf(proxy);

// getPrototypeOf()

返回值

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

拦截的操作

Object.getPrototypeOf(proxy)
Reflect.getPrototypeOf(proxy)
proxy.proto Object.prototype.isPrototypeOf(proxy)
proxy instanceof Object

捕获器处理程序参数

target ：目标对象。

捕获器不变式

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

9.setPrototypeOf()

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

const myTarget = {};
const proxy = new Proxy(myTarget, {
  setPrototypeOf(target, prototype) {
    console.log('setPrototypeOf()');
    return Reflect.setPrototypeOf(...arguments)
  }
});

Object.setPrototypeOf(proxy, Object);
// setPrototypeOf()

返回值

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

拦截的操作

Object.setPrototypeOf(proxy)
Reflect.setPrototypeOf(proxy)

捕获器处理程序参数

target ：目标对象。
prototype ：target 的替代原型，如果是顶级原型则为null 。

捕获器不变式

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

10. isExtensible()

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

const myTarget = {};
const proxy = new Proxy(myTarget, {
  isExtensible(target) {
    console.log('isExtensible()');
    return Reflect.isExtensible(...arguments)

  }
});
Object.isExtensible(proxy);
// isExtensible()

返回值

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

拦截的操作

Object.isExtensible(proxy) Reflect.isExtensible(proxy)

捕获器处理程序参数

target ：目标对象。

捕获器不变式

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

11.preventExtensions()

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

const myTarget = {};
const proxy = new Proxy(myTarget, {
  preventExtensions(target) {
    console.log('preventExtensions()');

    return Reflect.preventExtensions(...arguments)
  }
});
Object.preventExtensions(proxy);
// preventExtensions()

返回值

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

拦截的操作

Object.preventExtensions(proxy)
Reflect.preventExtensions(proxy)

捕获器处理程序参数

target ：目标对象。

捕获器不变式

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

12.apply()

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

const myTarget = () => {};
const proxy = new Proxy(myTarget, {
  apply(target, thisArg, ...argumentsList) {
    console.log('apply()');
    return Reflect.apply(...arguments)

  }
});
proxy();
// apply()

返回值

返回值无限制。

拦截的操作

proxy(…argumentsList)
Function.prototype.apply(thisArg,argumentsList)
Function.prototype.call(thisArg, …argumentsList)
Reflect.apply(target, thisArgument, argumentsList)

捕获器处理程序参数

target ：目标对象。
thisArg ：调用函数时的this 参数。
argumentsList ：调用函数时的参数列表

捕获器不变式

target 必须是一个函数对象。

13.construct()

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

const myTarget = function() {};

const proxy = new Proxy(myTarget, {
  construct(target, argumentsList, newTarget) {
    console.log('construct()');
    return Reflect.construct(...arguments)
  }
});
new proxy;
// construct()

返回值

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

拦截的操作

new proxy(…argumentsList)
Reflect.construct(target, argumentsList,newTarget)

捕获器处理程序参数

target ：目标构造函数。
argumentsList ：传给目标构造函数的参数列表。
newTarget ：最初被调用的构造函数。

捕获器不变式

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

3.代理模式

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

跟踪属性访问

通过捕获get 、set 和has 等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问过：

const user = {
  name: 'Jake'
};
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 name
proxy.age = 27; // Setting age=27

隐藏属性

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

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

属性验证

因为所有赋值操作都会触发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';
console.log(proxy.onlyNumbersGoHere);  // 1

函数与构造函数参数验证

跟保护和验证对象属性类似，也可对函数和构造函数参数进行审查。比如，可以让函数只接收某种类型的值：

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 {
      return Reflect.construct(...arguments);
    }
  }
});
new proxy(1);

new proxy();
// Error: User cannot be instantiated without id

数据绑定与可观察对象
通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。
比如，可以将被代理的类绑定到一个全局实例集合，让所有创建的实例都被添加到这个集合中：

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
proxy.push('Jacob');
// Jacob