JavaScript – Proxy

参考

介绍和使用

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

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

基本用法:

const obj = {
  name: 'Derrick',
  age: 11,
};

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

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

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

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

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

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

TODO

1. 除了 get set, 任何对象操作都可以被拦截, 包括 delete (所以 Proxy 比 getter setter 厉害多了), 以后有用到才补上

2. 上面有一些 TypeScript 的问题.