Bei einem Funktionsaufruf werden in der Regel alle Argumente auf einmal übergeben, aber es geht auch anders. Manchmal möchten wir ein oder mehrere Argumente fixieren, um dann die Funktion mit weniger Argumenten aufrufen zu müssen. Ein kleines Beispiel dürfte dies illustrieren.

function add(a, b) {
  function adder(b) {
    return a + b;
  }
  return adder;
}

var add2 = add(2); // Fixiere erstes Argument
add2(1); // 3
add2(2); // 4

Hier haben wir den Parameter a der Funktion add auf den Wert 2 fixiert (Zeile 8). Der Aufruf der add() Funktion hat uns eine neue Funktion mit Stelligkeit 1 zurückgegeben (add() ist eine Funktion höherer Ordnung). Die Funktion namens add2 können wir jetzt mit beliebigen Zahlen aufrufen, und das Resultat wird immer gegebene Zahl + 2 sein.

Leider ist unsere add() Funktion nicht sehr flexibel. Sie kann nur ein Argument fixieren. Man kann die Funktion auch so schreiben, dass sie mit beliebig vielen fixierten Argumente funktioniert, aber das ist nicht so einfach. Zum Glück bietet uns JavaScript eine vordefinierte Funktion, mit der man genau dies machen kann. Die Funktion heißt bind und befindet sich im Function.prototype-Objekt (Function.prototype.bind).

Signatur von Function.prototype.bind:

fn.bind(thisArg, [arg1], [arg2], ...)

arg1, arg2, ... sind die Funktionsargumente, die wir fixieren möchten, und sind optional. thisArg ist der Wert von this in der Funktion. Siehe auch: Funktionsaufruf mit gebundenem this-Wert.

Hier noch ein Beispiel der add() Funktion, aber diesmal mit Hilfe von Function.prototype.bind.

function add(a, b) {
  return a + b;
}

var add2 = add.bind(undefined, 2); // this ist undefined. Fixiere erstes Argument
add2(1); // 3
add2(2); // 4

Wir sehen: Mit Hilfe von bind() ist unser Code kürzer und lesbarer geworden. Die add()-Funktion benutzt kein this, und in einem solchen Fall können wir bedenkenlos undefined als thisArg übergeben.

Fragen oder Anregungen?

Twitter: @jsperts_de

Github: JSperts

Xing: JSperts

E-Mail: info@jsperts.de

Newsletter

Möchten Sie Zugang zu diesen Informationen haben?

  • Gutscheine und Angebote für Workshops
  • Informationen zu Workshops (neue Termine, neue Inhalte)
  • Benachrichtigungen über neue Blogartikel zu Themen wie Angular, ES6, React, usw.