JavaScript元编程之Proxy 【1】

思乡码农
194 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情 >>

前言

自从es6以后，JavaScript提供了Proxy和Rflect对象支持，允许你拦截并定义基本语言操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。借助这两个对象，你可以在 JavaScript 元级别进行编程。

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。看下面这个简单的例子

let handler = {
  get: function(target, name){
    return name in target ? target[name] : '我爱掘金';
}};

let p = new Proxy({}, handler);
p.a = 1;

console.log(p.a, p.b); // 1, 我爱掘金

Proxy 对象定义了一个目标（这里是一个空对象）和一个实现了 get 陷阱的 handler 对象。这里，代理的对象在获取未定义的属性时不会返回 undefined，而是返回 我爱掘金。

语法

const proxy = new Proxy(target, handler)

参数

  • target

    要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

  • handler

    一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 proxy 的行为。

如何创建一个可撤销的Proxy？

Proxy自身提供了一个方法revocable,通过revocable创建的proxy 是可以被撤销的

let rp = Proxy.revocable(target, handler);

创建好的rp具有量个属性，一个proxy，和正常new Proxy创建的对象几乎一样，除了可以被撤销，还有一个属性是revoke， 调用revoke可以撤销之前创建的proxy对象

一旦某个代理对象被撤销，它将变得几乎完全不可调用，在它身上执行任何的可代理操作都会抛出 TypeError异常（注意，可代理操作一共有 13种执行这 13 种操作以外的操作不会抛出异常）。一旦被撤销，这个代理对象便不可能被直接恢复到原来的状态，同时和它关联的目标对象以及处理器对象都有可能被垃圾回收掉。再次调用撤销方法 revoke() 则不会有任何效果，但也不会报错。

var revocable = Proxy.revocable({}, {
  get(target, name) {
    return "[[" + name + "]]";
  }
});
var proxy = revocable.proxy;
proxy.foo;              // "[[foo]]"

revocable.revoke();

console.log(proxy.foo); // 抛出 TypeError
proxy.foo = 1           // 还是 TypeError
delete proxy.foo;       // 又是 TypeError
typeof proxy            // "object"，因为 typeof 不属于可代理操作

可被代理的13种操作

  • handler.apply()
  • handler.construct()
  • handler.defineProperty()
  • handler.deleteProperty()
  • handler.get()
  • handler.getOwnPropertyDescriptor()
  • handler.getPrototypeOf()
  • handler.has()
  • handler.isExtensible()
  • handler.ownKeys()
  • handler.preventExtensions()
  • handler.set()
  • handler.setPrototypeOf()

下一节，将就可被代理的14种操作进行依次说明和实践

avatar
文章
阅读
粉丝