JS 中神奇的 Proxy

今天刚看到一个之前没见过的 JS 特性，那就是代理(Proxy)。Proxy 是用在 Object 上的，正如它的字面所显示的那样，它可以在 Object 外套一层代理，我们将对象的一些行为都通过这一层代理进行，比如说 get, set 捕获器(trap)

Proxy 可以设置 2 个参数

• target: 要代理的对象
• handler: 一个对象，里面定义要如何拦截和修改一些对被定义对象的操作(也就是包含捕获器)

可以在 get 和 set 里面写点自己的逻辑，例如：

const target = {
  foo: "Hello",
  bar: "World",
};

const target_proxy = new Proxy(target, {
  get(target, prop, value) {
    if (prop === "foo") return "Hello World.";
    // 如果 prop 不存在那就返回 "Not found"
    return prop in target ? target[prop] : "Not found";
  },
  set(target, prop, value) {
    // 不允许改掉 foo 的值
    if (prop !== "foo") target[prop] = value;
  },
});

target_proxy.bar = "...";

console.log(target_proxy.foo);
console.log(target_proxy.bar);

// 打印的结果会是:
// Hello World.
// ...

handler 不仅可以写 get 和 set, 还可以写 construct, apply, defineProperty 等等

function extend(sup, base) {
  base.prototype = Object.create(sup.prototype);
  base.prototype.constructor = new Proxy(base, {
    construct: function (target, args) {
      var obj = Object.create(base.prototype);
      this.apply(target, obj, args);
      return obj;
    },
    apply: function (target, that, args) {
      sup.apply(that, args);
      base.apply(that, args);
    },
  });
  return base.prototype.constructor;
}

MDN 上还有很多 Proxy 的例子

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy