首页 › JavaScript › ES6+ 深入 › Proxy 与 Reflect

Proxy

拦截对象的操作，可以加入自定义逻辑。

const target = { name: '张三', age: 28 };

const handler = {
  get(target, key, receiver) {
    if (key === 'age') {
      return `保密`;
    }
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    if (key === 'age' && (value < 0 || value > 150)) {
      throw new Error('年龄不合法');
    }
    return Reflect.set(target, key, value, receiver);
  },
  has(target, key) {
    if (key === 'private') return false;
    return key in target;
  },
  deleteProperty(target, key) {
    if (key === 'id') throw new Error('不能删除 id');
    return Reflect.deleteProperty(target, key);
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.age);     // "保密"
proxy.age = 200;            // ❌ 报错

响应式原理模拟

function reactive(obj) {
  const handlers = new Set();

  return new Proxy(obj, {
    get(target, key, receiver) {
      // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const old = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (old !== value) {
        handlers.forEach(fn => fn());
      }
      return result;
    }
  });
}

小结

API	作用
new Proxy(target, handler)	代理对象
get / set / has / deleteProperty	拦截器方法
Reflect.*	对应操作的安全默认实现

上一节：模块化 下一节：迭代器与生成器

贡献者: 布欧-Lewyon