Function.prototype.bind() — Methode · JavaScript-Referenz

Signatur

Function.prototype.bind(thisArg, ...args)

Beschreibung

bind() ruft die Funktion nicht auf, sondern gibt eine neue Funktion zurück, eine sogenannte gebundene Funktion (bound function). Bei jedem Aufruf dieser Funktion läuft die ursprüngliche Funktion mit dem festgelegten this-Wert. Die vorab übergebenen Argumente stehen dabei vor den Argumenten des späteren Aufrufs.

Typische Einsatzfälle sind Callbacks und Event-Handler, bei denen eine Methode ihren Objektkontext verlieren würde, zum Beispiel bei setTimeout(obj.methode, 100) oder addEventListener('click', this.handle). Ein zweiter Einsatzfall ist partielle Anwendung: Man legt einige Argumente vorab fest und erhält eine spezialisierte Funktion mit weniger Parametern.

Eine gebundene Funktion lässt sich nicht erneut umbinden. Auch ein späteres bind(), call() oder apply() ändert this nicht mehr, weitere Argumente werden aber angehängt. Wird die gebundene Funktion mit new aufgerufen, ignoriert die Engine den gebundenen this-Wert, die vorab gesetzten Argumente gelten aber weiter.

Die Eigenschaft name der neuen Funktion lautet "bound " + ursprünglicherName. Ihre length entspricht der ursprünglichen Parameteranzahl minus der Zahl der vorab gesetzten Argumente, mindestens aber 0.

Parameter

Name	Typ	Default	Beschreibung
$thisArg	any	undefined	Wert, der beim Aufruf als `this` gilt. Im nicht-strikten Modus werden `null` und `undefined` durch `globalThis` ersetzt und primitive Werte in ihr Wrapper-Objekt umgewandelt. Beim Aufruf mit `new` wird der Wert ignoriert.
$...args	any[]		Argumente, die bei jedem Aufruf vor den tatsächlich übergebenen Argumenten eingesetzt werden (partielle Anwendung).

Rückgabewert

Typ

Function

Beschreibung

Eine neue, gebundene Funktion mit festgelegtem this und den vorab gesetzten Argumenten. Die ursprüngliche Funktion bleibt unverändert.

Beispiele

Methode als Callback ohne Kontextverlust

const zaehler = {
  stand: 0,
  erhoehen() {
    this.stand++;
    console.log(`Stand: ${this.stand}`);
  }
};

// Ohne bind wäre this in setTimeout undefined bzw. globalThis
setTimeout(zaehler.erhoehen.bind(zaehler), 100);

const lose = zaehler.erhoehen;
// lose(); // TypeError im strikten Modus / falsches this

Stand: 1

Partielle Anwendung: Funktion mit festen Argumenten

const multipliziere = (a, b) => a * b;

// this ist bei Arrow-Functions egal, daher null
const verdoppeln = multipliziere.bind(null, 2);
const verdreifachen = multipliziere.bind(null, 3);

console.log(verdoppeln(21));
console.log(verdreifachen(5));
console.log(verdoppeln.name, verdoppeln.length);

42 15 bound multipliziere 1

Event-Handler in einer Klasse binden und wieder entfernen

class Umschalter {
  constructor(button) {
    this.button = button;
    this.aktiv = false;
    // Referenz einmal erzeugen und speichern, damit removeEventListener funktioniert
    this.handleClick = this.handleClick.bind(this);
    button.addEventListener('click', this.handleClick);
  }

  handleClick() {
    this.aktiv = !this.aktiv;
    this.button.textContent = this.aktiv ? 'An' : 'Aus';
  }

  zerstoeren() {
    this.button.removeEventListener('click', this.handleClick);
  }
}

const btn = document.createElement('button');
document.body.append(btn);
const u = new Umschalter(btn);
btn.click();
console.log(btn.textContent);
u.zerstoeren();

An

Gebundenes this lässt sich nicht überschreiben

function gruss() {
  return `Hallo, ${this.name}`;
}

const anna = gruss.bind({ name: 'Anna' });
const versuch = anna.bind({ name: 'Ben' });

console.log(anna());
console.log(versuch());
console.log(anna.call({ name: 'Clara' }));

Hallo, Anna Hallo, Anna Hallo, Anna

// Wichtig · Fallstricke

Bei jedem Aufruf eine neue Funktion: el.removeEventListener('click', this.fn.bind(this)) hat keine Wirkung, weil bind() jedes Mal eine neue Referenz erzeugt. Speichern Sie die gebundene Funktion deshalb vorher, zum Beispiel im Konstruktor.
Arrow-Functions: Sie haben kein eigenes this. Deshalb bleibt thisArg bei ihnen wirkungslos, nur die vorab gesetzten Argumente greifen. Als Alternative zu bind(this) eignen sich oft Klassenfelder mit Arrow-Functions, etwa handleClick = () => { … }.
Keine Umbindung möglich: Ein weiteres bind(), call() oder apply() ändert das gebundene this nicht mehr.
Aufruf mit new: Das gebundene this wird ignoriert. Gebundene Funktionen haben keine eigene prototype-Eigenschaft, instanceof prüft gegen die Zielfunktion.
Nicht-strikter Modus: Übergeben Sie null oder undefined, zeigt this auf globalThis. Das kann versehentlich globale Variablen verändern.
Performance: Jede gebundene Funktion belegt zusätzlichen Speicher. Rufen Sie bind() nicht in häufig aufgerufenen Schleifen oder bei jedem Render-Durchlauf auf.
Kompatibilität: Seit ES5 in allen Browsern und in Node.js verfügbar. Ein Polyfill ist nur für sehr alte Umgebungen wie IE 8 nötig.

Siehe auch

Function.prototype.call() Function.prototype.apply() this Function EventTarget.addEventListener() Function.prototype[Symbol.hasInstance]()