Function.prototype.bind()

JAVA SCRIPT, PROGRAMOWANIE / Autor

Funkcja bind pozwala na przekazywanie powiązanie danej funkcji z kontekstem (opierając się przy tym o słowo kluczowe this). Czyli, jeśli chcemy przekazać gdziekolwiek naszą funkcję, żeby została wykonana (na przykład jako callback) i zależy nam na tym, żeby ta funkcja została wykonana w konkretnym kontekście należy użyć funkcji bind. W gruncie rzeczy funkcja bind nadpisuje odwołanie do elementu this na przekazany do niej obiekt (kontekst).

* Drobne zastrzeżenie – używam wymiennie słów obiekt oraz kontekst. Według mnie lepszą abstrakcją dla słowa obiekt jest w tej sytuacji kontekst (a kontekst sam w sobie jest najzwyklejszym obiektem).

Przykład

Przykład pokazuje podstawowe wykorzystanie metody bind:

Copy Code
let firstContext = {
   data: 'first context data'
}

let secondContext = {
   data: 'second context data'
}

let printContextData = function(){
	console.log(this.data);
}

let notBounded = printContextData;
let boundedToFirstContext = printContextData.bind(firstContext);
let boundedToSecondContext = printContextData.bind(secondContext);

notBounded();
boundedToFirstContext();
boundedToSecondContext();

Wynikiem działania programu będzie:

Copy Code
> undefined
> "first context data"
> "second context data"

Opis rezultatów

  1. Ponieważ funkcja notBounded nie została powiązana z żadnym kontekstem, to automatycznie próbuje korzystać z kontekstu globalnego (jeśli nie jesteśmy w strict-mode i nie jesteśmy w żadnej klasie, to będzie to obiekt Window). A że do globalnego obiektu nie została przypisana zmienna o nazwie data, to jako wynik otrzymujemy undefined.
  2. Metoda boundedToFirstContext została powiązana z kontekstem firstContext. Stąd korzysta ze zmiennych zawartych w tym kontekście. Dzięki czemu dostajemy first context data.
  3. Identyczna sytuacja jak w punkcie drugim występuje dla funkcji boundedToSecondContext.

Warto zajrzeć