javascript - 使用 getter 和 setter 进行函数链接的方法

Question

如果我想使用流畅的函数链接来支持对象属性的分配。例如，像这样的东西:

foo.width(500).height(250).margin({left:5,right:10});

我显然可以创建一个函数定义:

margin(value) {
    this.config.margin = value;
    return this;
}

但是，如果我希望能够支持上述函数链接，但也直接赋值，如:

foo.margin = {left:5,right:10};

我可以通过添加一个 setter 来添加这种支持:

set margin(value) {
    this.config.margin = value;
}

但是您不能拥有同名的 setter 和函数，显然 setter 仅适用于文字赋值操作，而函数定义仅适用于流畅的 API 方法。

有没有办法在 JS ES6 中以语法优雅的方式兼顾两者？

---

我已经包含了一个 fiddle ，它演示了流畅和文字赋值运算符的工作示例。唯一的问题？我不得不求助于使用不同的命名签名，这增加了 API 表面……如果可能的话，我想避免这种情况。

http://www.es6fiddle.com/i6o0jscx/

Answer 1

如果您愿意使用额外的两个字符来检索属性值，那么您可以这样做:

export class Foo {
  constructor() {
    this.config = {
      width:500,
      height: 400
    };
  }

  get width() {
    return function(value) {
      if (arguments.length) {
        this.config.width = value;
        return this;
      }
      return this.config.width;
    };
  }
  set width(value) {
    this.config.width = value;
  }
}

let foo = new Foo();
console.log(foo.width());
foo.width = 600;
console.log(foo.width());
console.log(foo.width(250).width());

基本上，getter 返回一个函数，如果调用时带参数，则返回值，如果调用时不带参数，则返回值。这类似于 jQuery 为 .text() 和 .html() 以及许多其他内容提供的 API，但它为您提供了直接分配给的附加选项该属性(property)。我不会真的推荐这个，因为能够做到 foo.width = 5; 而不是 var w = foo.width; 会让人感到困惑，但我不能找到完全实现您想要做的事情的好方法。

http://www.es6fiddle.com/i6o14n4b/