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

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

3 个答案: