javascript - 如何在 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% }