零基础学习JS--基础篇--元编程

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

代理

Proxy 对象可以拦截某些操作并实现自定义行为。

例如获取一个对象上的属性：

let handler = {
  get(target, name) {
    return name in target ? target[name] : 42;
  },
};
 
let p = new Proxy({}, handler);
p.a = 1;
 
console.log(p.a, p.b); // 1, 42

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

更多例子参见 Proxy 页面。

术语：

在讨论代理的功能时会用到以下术语：

handler：包含陷阱的占位符对象（下译作“处理器”）。

陷阱：提供属性访问的方法（这类似于操作系统中陷阱的概念）。

target：代理所虚拟化的对象（下译作“目标”）。它通常用作代理的存储后端。JavaScript 会验证与不可扩展性或不可配置属性相关的不变式。

不变式：实现自定义操作时保持不变的语义称为不变式。如果你破坏了处理器的不变式，则会引发 TypeError 异常。

处理器和陷阱

以下表格中总结了 Proxy 对象可用的陷阱。详细的解释和例子请看参考页。

可撤销的Proxy

可以用 Proxy.revocable() 方法来创建可撤销的 Proxy 对象。这意味着可以通过 revoke 函数来撤销并关闭一个代理。

此后，对代理进行的任意的操作都会导致 TypeError。

const revocable = Proxy.revocable(
  {},
  {
    get(target, name) {
      return `[[${name}]]`;
    },
  },
);
const proxy = revocable.proxy;
console.log(proxy.foo); // "[[foo]]"
 
revocable.revoke();
 
console.log(proxy.foo); // TypeError: Cannot perform 'get' on a proxy that has been revoked
proxy.foo = 1; // TypeError: Cannot perform 'set' on a proxy that has been revoked
delete proxy.foo; // TypeError: Cannot perform 'deleteProperty' on a proxy that has been revoked
console.log(typeof proxy); // "object", `typeof` 不会触发任何陷阱

反射

Reflect 是一个内置对象，它为可拦截的 JavaScript 操作提供了方法。这些方法与代理处理器所提供的方法类似。

Reflect 并不是一个函数对象。

Reflect 将默认操作从处理器转发到 target。

以 Reflect.has() 为例，你可以将 in 运算符作为函数：

Reflect.has(Object, "assign"); // true

更好的apply函数：

在不借助 Reflect 的情况下，我们通常使用 Function.prototype.apply() 方法调用一个具有给定 this 值和 arguments 数组（或类数组对象）的函数。

Function.prototype.apply.call(Math.floor, undefined, [1.75]);

借助 Reflect.apply，这些操作将变得更加简洁：

Reflect.apply(Math.floor, undefined, [1.75]);
// 1;
 
Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
// "hello"
 
Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
// 4
 
Reflect.apply("".charAt, "ponies", [3]);
// "i"

检查属性是否定义成功：

使用 Object.defineProperty，如果成功则返回一个对象，否则抛出一个 TypeError，你可使用 try...catch 块来捕获定义属性时发生的任何错误。因为 Reflect.defineProperty 返回一个布尔值表示的成功状态，你可以在这里使用 if...else 块：

if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

这篇文章和上一篇文章一样，都是新知识，内容不多，但难于理解，里面还有很多细节大家可以点击链接进行更详细的学习，这里不再进行详细的阐述。

附：以上内容均为个人在MDN网站上学习JS的笔记，若有侵权，将在第一时间删除，若有错误，将在第一时间修改。