Wie erstellt man eine verkettbare Funktion in JavaScript?

Question

Wir stellen uns eine Funktion wie diese vor:

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

Die Verwendung davon wäre wie folgt:

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

Ich suche nach einer Möglichkeit, eine Funktion zu erstellen, die mit anderen Funktionen verkettbar ist.

Stellen Sie sich die Verwendung vor:

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

Wie würde ich das machen?

Answer 1

Klar, der Trick besteht darin, das Objekt zurückzugeben, sobald du mit der Modifikation fertig bist:

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

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

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

Um die Methode auf String verfügbar zu machen, modifiziere ich sein Prototyp. Vorsicht, dies nicht bei Object zu tun, da dies Probleme verursachen kann, wenn ihre Eigenschaften aufgelistet werden.

Answer 2

Wenn ich mich richtig erinnere, kannst du "this" als Kontext einer Funktion (dem Objekt, zu dem es gehört) verwenden und es zurückgeben, um die Funktion verketten zu können. Mit anderen Worten:

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

dann kannst du die Aufrufe verketten, wie obj.f1().f2()

Denke daran, du wirst nicht das erwünschte Ergebnis erzielen können, wenn du obj.f1().toUpperCase() aufrufst - es wird f1() ausführen, "this" zurückgeben und versuchen, obj.toUpperCase() aufzurufen.

Answer 3

Hier ist eine Möglichkeit, dies zu tun, ohne String.prototype zu verändern, indem man ein Objekt zurückgibt, das einem String ähnelt, mit einer zusätzlichen Methode foo(). Es gibt jedoch einige Nachteile dieses Ansatzes, die damit zusammenhängen, dass es keinen tatsächlichen String zurückgibt.

// Gibt ein Objekt zurück, das einem String ähnelt, mit einer zusätzlichen Methode foo()
function foo(str) {
  return Object.assign(`${str ?? this}+`, {
    foo
  });
}

var str = "Notizblock";
console.log(
  "BEISPIEL - foo(str).foo().toUpperCase():",  
  foo(str).foo().toUpperCase()
);

console.log("---");

console.log("Einige Probleme mit dieser Lösung:");
console.log("typeof foo(str):", typeof foo(str));
console.log("foo(str).foo():", foo(str).foo());

console.log(
  "Möglicherweise müssen Sie toString() verwenden - foo(str).foo().toString():",
  foo(str).foo().toString()
);

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

Answer 4

Sie können dies auch mit class erreichen