有没有一种方法可以在不创建新对象的情况下链接 Javascript 函数？

Question

假设我们有一个 Button 元素

const ourButton = document.getElementById("#theButton");

并且我们想要一个流畅的 API 来改变这个按钮的样式而不创建一个新的对象，所以链接一个这样的函数：

style(ourButton).property("padding").value("32px");

这可能吗？我似乎无法弄清楚如何创建这种行为。我尝试通过创建这样的构造函数来构建 Fluent API "the conventional way"：

var FStyle = function(node) {
  this.node = node;
}

FStyle.prototype.property = function(property) {
  this.property = property;
  return this;
}

FStyle.prototype.value = function(value) {
  this.value = value;
  this.node.style[this.property] = this.value;
  return this;
}

并通过构造一个新对象来使用它：

const ourButtonStyle = new FStyle(ourButton);
ourButtonStyle.property("padding").value("64px");

一次有效。如果我想添加新样式，我必须创建一个全新的对象。这是为什么？

TL;DR：出于学习目的，我正在尝试链接函数，但对它的理解还不够充分，无法理解上述行为。在普通函数中返回 this 以将其他函数链接到它也不会完成这项工作。最后我想"pipe"一个函数的结果到另一个函数。

Answer 1

虽然不容易看出，但这里的问题是命名！

您正在创建一个名为 property 的原型函数，然后实际上您用从函数调用中获得的值覆盖了这个函数。检查下面代码中的注释。

FStyle.prototype.property = function(property) {
  // at this point "ourButtonStyle.property" is a function
  this.property = property;
  // here "ourButtonStyle.property" is a string 
  return this;
}

一个简单的解决方法是用稍微不同的东西重命名它们

var FStyle = function(node) {
  this.node = node;
}

FStyle.prototype.property = function(prop) {
  this.prop = prop;
  return this;
}

FStyle.prototype.value = function(val) {
  this.val = val;
  this.node.style[this.prop] = this.val;
  return this;
}

有没有一种方法可以在不创建新对象的情况下链接 Javascript 函数？

Is there a way to chain Javascript functions without creating a new object?

javascript

fluent

chaining

ecmascript-6