使用 Proxy 对象链接动态 getter

ES6 的到来使得 jQuery 失去了它的地位，因为许多它为开发人员提供的便利现在已经在语言本身中可用。然而，jQuery 的 API 设计在许多方面都很方便，而原生 JavaScript 往往不是这样。jQuery 提供的最实用的功能之一是能够将方法链接在一起，减少重复代码并使代码更易读。

看看手头的用例，我认为我可以使用 JavaScript 的 Proxy 对象来拼凑出一个通用的解决方案。实际上，我认为我在我的上一篇文章中描述的动态 getter 和 setter 的概念是一个很好的起点。

简单回顾一下，拦截 Proxy 对象的 get 和 set 陷阱的行为允许我们为对象创建动态访问器。当数据的形状事先不知道，或者需要在返回之前操作属性的值时，这特别有用。

在我们的场景中，我们希望每个属性都可以作为函数访问。该函数应根据接收到的参数执行以下两种操作之一：

• 如果参数是 undefined，则应返回属性本身。
• 如果参数是其他任何值，则应将属性设置为参数的值，并返回对象的代理。

根据这些要求，我们可以定义 get 陷阱的处理程序行为。我们只需要检查参数是否为 undefined，并选择要执行的行为。下面是代码的样子：

const getHandler = {
  get: (target, prop) => {
    return value => {
      if (typeof value !== 'undefined') {
        target[prop] = value;
        return new Proxy(target, getHandler);
      }
      return target[prop];
    };
  }
};

const styles = {};
const proxiedStyles = new Proxy(styles, getHandler);

proxiedStyles.color('#101010').background('#fefefe').margin('4px 8px');

如你所见，处理程序非常简短和直接。唯一令人困惑的一步是在陷阱中创建一个新的Proxy。由于在陷阱中我们没有对代理对象本身的引用，所以我们需要创建一个新的代理对象。这是必要的，因为我们希望返回一个新的代理对象以允许链式调用。如果我们不这样做，代理对象只能使用一次。