JavaScript – Proxy

参考

阮一峰 – Proxy

介绍和使用

Proxy 的作用是代理对象, 消费者不直接使用对象, 而是使用代理对象.

一般上做代理的目的就是想拦截对象访问做一些别的事情. 比如当对象改变以后, 同步 HTML.

基本用法:

interface Person {
  name: string;
  age?: number;
}
const person: Person = {
  name: 'Derrick',
  age: 11,
};

const proxy = new Proxy(person, {
  get(target, prop: keyof typeof person, receiver) {
    console.log(target === person); // true
    console.log('prop', prop); // age
    console.log('receiver', receiver === proxy); // true
    return target[prop];
  },
  set(target, prop: keyof typeof person, value: typeof person[keyof typeof person], _receiver) {
    (target as any)[prop] = value;
    return true; // 在 'use strict' mode 中, 如果这里返回 false 则会报错
  },
  deleteProperty(target, p: keyof typeof person) {
    delete target[p];
    return true;
  },
});

proxy.age = 15;
console.log(proxy.age);
delete proxy.age;

上面拦截了对象的 get set delete 访问. 当对象被 get set delete 时, Proxy 方法就会被触发.

可以获得真的对象, 被访问的属性, set 的值, 还有 Proxy 对象.

然后就可以做许多事情了.

注意 set, delete 必须返回 boolean. 如果返回 false 在 strict mode 下会报错.

TODO

上面有一些 TypeScript 的问题.