有没有办法在不创建新对象的情况下链接 Javascript 函数？

Question

假设我们有一个 Button 元素

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

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

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

这可能吗？我似乎无法弄清楚如何创建这种行为。我尝试通过创建如下构造函数来“以传统方式”构建 Fluent API：

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 以将其他函数链接到它也不会完成这项工作。最后我想将一个函数的结果“管道”到另一个函数。

Answer 1

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

您正在创建一个名为 property 的原型函数，然后基本上用从函​​数调用中获得的值覆盖该函数。检查下面代码中的 cmets。

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;
}