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

假设我们有一个按钮元素

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

我们需要一个流畅的API来更改此按钮的样式，而无需创建新对象，因此，请链接如下函数：

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

这可能吗？我似乎不知道如何创造这种行为。我尝试通过创建如下构造函数“以传统方式”构建Fluent API：

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

var FStyle=函数（节点）{
this.node=节点；
}
FStyle.prototype.property=函数（属性）{
this.property=属性；
归还这个；
}
FStyle.prototype.value=函数（值）{
这个值=值；
this.node.style[this.property]=this.value；
归还这个；
}

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

const ourButtonStyle=新的FStyle（ourButton）；
ourButtonStyle.property（“padding”）.value（“64px”）；

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

---

TL；博士：为了学习的目的，我试图链接函数，但对它的理解还不足以理解上述行为。在一个普通函数中返回此函数以将其他函数链接到它也不会起作用。最后，我想将一个函数的结果“管道”到另一个函数

虽然不容易看到，但这里的问题是namings

您正在创建一个名为

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

---

为什么它只工作一次？看起来，

ourButtonStyle.property（“foo”）.value（“bar”）.property（“baz”）.value（“qux”）

应该可以正常工作。（旁白：像

ourButtonStyle.property（“foo”）.property（“bar”）.value（“baz”）

这样的东西也是可能的，但令人困惑，这表明这可能不是最好的API设计。）只是说：创建新对象绝对没有错@Thomas I在执行一次链后得到错误：“UncaughtTypeError:ourButtonStyle.property不是函数”。MRA:@Bergi我同意，但我为什么要这么做。（而不仅仅是调用：

node.style.property=value

——这更简单）是练习方法链接和创建Fluent API。在我看来，每次想更改样式时都创建一个新对象并不实际。@MelvinIdema在理想的fluentapi中，所有对象都是不可变的，每次方法调用都会返回一个新实例。（我不是说你应该多次调用

new FStyle（…）

，我只是说你可以轻松地使用链中的多个对象）。这是一个巨大的“尤里卡”时刻。你完全正确！奇怪的是，这件事完全超出了我的想象。不幸的是，奇怪的是，它似乎并没有解决问题。。。我还是有打字错误。但是检查ourButtonStyle.property的类型，它会显示：function。即使执行了一次。控制台逐字记录：

Typeof ourButtonStyle.property:function

，紧接着：

typeError ourButtonStyle.property不是一个函数

Facepalm，我没有看到您也更改了值。非常感谢你！我想是时候休息一下了哈哈。解决了的！您是否建议在不创建新对象的情况下链接函数？类似于：

changeStyle（node）.property（“边框颜色”）.value（“红色”）@MelvinIdema很高兴，你成功了！至于您关于链接而不直接创建新对象的问题，也许类似的内容可以帮助您：
functionchangestyle（node）{returnnewfstyle（node）}