如何在 JavaScript 中创建可链接函数？

Question

让我们想象这样的函数：

function foo(x) {
    x += '+';
    return x;
}

它的用法如下：

var x, y;
x = 'Notepad';
y = foo(x);
console.log(y); // Prints 'Notepad+'.

我正在寻找一种方法来创建可与其他函数链接的函数。

想象一下用法：

var x, y;
x = 'Notepad';
y = x.foo().foo().toUpperCase(); // Prints 'NOTEPAD++'.
console.log(y);

我将如何做到这一点？

Answer 1

当然，诀窍是在完成修改后返回对象：

String.prototype.foo = function() {
    return this + "+";
}

var str = "Notepad";
console.log(str.foo().foo().toUpperCase());

http://jsfiddle.net/Xeon06/vyFek/

为了使该方法在 String 上可用，我正在修改它的原型。但请注意不要在 Object 上执行此操作，因为在枚举其属性时可能会导致问题。

Answer 2

如果我没记错的话，您可以使用“this”作为函数的上下文（它所属的对象）并返回它以使函数可链接。换句话说：

var obj = 
{
    f1: function() { ...do something...; return this;},
    f2: function() { ...do something...; return this;}
}

然后您可以像 obj.f1().f2() 这样链接调用。

请记住，您将无法通过调用 obj.f1() 来实现您所期望的效果.toUpperCase() - 它将执行 f1()，返回“this”并尝试调用 obj.toUpperCase()。

Answer 3

这里有一种方法可以在不干扰 String.prototype 的情况下实现这一点，即通过返回一个类似于字符串的对象，并使用附加方法 foo() 。然而，这种方法有一些缺点，即它不返回实际的字符串。

// Returns an object similar to a string, with an additional method foo()
function foo(str) {
  return Object.assign(`${str ?? this}+`, {
    foo
  });
}

var str = "Notepad";
console.log(
  "EXAMPLE - foo(str).foo().toUpperCase():",  
  foo(str).foo().toUpperCase()
);

console.log("---");

console.log("Some issues with this solution:");
console.log("typeof foo(str):", typeof foo(str));
console.log("foo(str).foo():", foo(str).foo());

console.log(
  "You may need to use toString() - foo(str).foo().toString():",
  foo(str).foo().toString()
);

.as-console-wrapper { min-height: 100% }