ES12 中的 Reference-able Exotic Objects 详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中，Reference-able Exotic Objects 是一个新增的概念。这个概念可以让开发者更好的理解 JS 中的对象，并有助于提高代码的可读性和可维护性。

什么是 Reference-able Exotic Objects？

Reference-able Exotic Objects 是一种特殊类型的对象，它们提供了一些自定义的行为，使其能够像普通对象一样被引用和操作。与普通对象不同的是，它们没有常规的内置方法，而是通过一些自定义方法来实现对象的行为。

通俗来说，它们是一种复杂的对象类型，可以被 JS 引擎用来实现一些高级数据结构和具有复杂内部状态的对象。

Reference-able Exotic Objects 的特征

具有唯一的内部状态，无法通过普通的属性访问和修改；
可以像普通对象一样通过引用（Reference）进行传递和操作；
通过一些自定义方法来实现对象的行为；
不能被继承，也不能作为父类。

Reference-able Exotic Objects 的分类

在 ES12 中，Reference-able Exotic Objects 可以分为几类：

Map Objects：ES6 引入的 Map 类型；
Set Objects：ES6 引入的 Set 类型；
WeakMap Objects：ES6 引入的 WeakMap 类型；
WeakSet Objects：ES6 引入的 WeakSet 类型；
ArrayBuffer Objects：提供一种底层的二进制数据存储方式；
DataView Objects：提供一种跨字节访问 ArrayBuffer 数据的方式；
TypedArray Objects：一组被设计用于协同工作的数据类型，共享 ArrayBuffer 作为它们的内部存储；
Proxy Objects：为对象提供了动态代理的功能。

示例代码

下面是一个使用 Proxy 对象实现的简单事件处理程序的示例代码：

// javascriptcn.com 代码示例
let events = new Proxy({}, {
  get: function(target, event, receiver) {
    if (!(event in target))
      target[event] = [];
    return function() {
      target[event].forEach(function(handler) {
        handler.apply(receiver, arguments);
      });
    };
  }
});

events.create = function(id) {
  console.log(`created a new object with id ${id}`);
};

events.update = function(id, props) {
  console.log(`updated object with id ${id} with new properties`, props);
};

events.delete = function(id) {
  console.log(`deleted object with id ${id}`);
};

events.create(1);
events.update(1, { name: "foo", age: 23 });
events.delete(1);

在上面这个例子中，我们创建了一个空的对象 events，然后使用 Proxy 对象为它提供了 get 方法用于捕获该对象的属性访问。当一个属性被访问时，我们通过检查该属性是否存在，然后为它添加一个空数组来创建一个新的事件。

我们使用一个类似事件的方式来关联钩子函数。在 create、update 和 delete 方法被调用时，它们会自动将传入的参数执行，然后调用订阅该事件的所有处理程序。通过使用 Reference-able Exotic Objects，我们可以很容易地管理我们的事件的处理程序，并可以通过这种方式来实现高级的事件处理系统。

总结

Reference-able Exotic Objects 是 ES12 新增的一个概念，它们是一种自定义行为的对象类型，可以用于实现高级数据结构和具有复杂内部状态的对象。它们具有唯一的内部状态，可以像普通对象一样通过引用进行传递和操作，并且通过一些自定义方法来实现对象的行为。掌握它们的概念和分类，在编程中可以更加灵活地运用 JavaScript 对象。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530bf2f7d4982a6eb24e719