Omówienie funkcji call, bind i apply

W tym artykule omówimy kilka podstawowych funkcji, które możemy wykorzystać programując w JavaScript. Funkcje te to:

Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()

Teraz przejdę do omówienia każdej z poszczególnych funkcji wraz z przykładami, które powinny Ci w prosty i przystępny sposób zobrazować ich działanie.

Funkcja call()

Całość działania funkcji call() opiera się o słowo kluczowe this. Pierwszym parametrem jakim podajemy jest odwołanie się do elementu, który będzie przekazywał this. W kolejnych parametrach podajemy dodatkowe argumenty funkcji, jeśli są potrzebne. Co warto zaznaczyć, wszystkie parametry są opcjonalne. Spójrzmy zatem na przykład:


const cart = {
  value: 0,
  discount: 0,
  getReducedPrice: function() {
    return this.value - (this.value * this.discount);
  }
}

const cartWithStuff = {
  value: 300,
  discount: 0.12,
  products: ["Cherries", "Bananas", "Pineapples"]
}

cart.getReducedPrice.call(cartWithStuff);

Stworzyłem prosty koszyk wraz z funkcją do obliczania wartości po przyznanym rabacie. Dla przejrzystości podałem w obiekcie cart wartości zerowe. Następnie mamy już koszyk z produktami, podsumowaną cena i procentowym rabatem. Pozostaje nam tylko obliczyć ostateczną wartość koszyka. W tym celu skorzystamy właśnie z funkcji call(). Dzięki temu funkcja getReducedPrice() jako kontekst przyjęła this obiektu cartWithStuff.

Co ciekawe gdybyśmy nie podali żadnego parametru w omawianej funkcji to w tym wypadku naszym this stanie się this obiektu window. Wtedy w naszym wypadku otrzymamy wynik NaN. Twoim zadaniem domowym będzie sprawdzenie jaki wynik otrzymamy w przypadku, gdy na początku naszego kodu zawrzemy klauzulę ’use strict’.

Funkcja apply()

Zachowanie funkcji apply() jest bardzo podobne jak funkcji call(). Szczegółem odróżniającym obie funkcje jest to, że funkcja apply przyjmuje dodatkowe parametry w tablicy. Zobaczmy jak prezentuje się nasz przykład:


const cart = {
  value: 0,
  getPriceWithCurrency: function(discount, currency){
    return `${this.value - (this.value * discount)} ${currency}`
  }
}

const cartWithStuff = {
  value: 300,
  products: ["Cherries", "Bananas", "Pineapples"]
}

cart.getPriceWithCurrency.apply(cartWithStuff, [0.15,'USD']);

Jak widać zbyt wiele się nie zmieniło. Aby dobrze zobrazować zmiany oraz różnicę między funkcjami przeniosłem miejsce definiowania wysokości rabatu z właściwości obiektu do argumentu funkcji.

Bardzo ciekawym zastosowaniem funkcji apply() jest możliwość scalenia dwóch tablic nie tworząc przy tym nowej tablicy. Kod wraz z przykładem i omówieniem znajdziesz w drugim linku w źródłach i materiałach dodatkowych na końcu tego artykułu.

Funkcja bind()

Jest to kolejna bardzo podobna w działaniu funkcja. Kluczową różnicą jest to, że użycie bind() nie wywołuje funkcji a jedynie zwraca ją z nowo przypisanym this. Spójrzmy jak obrazuje to przykład:


const cart = {
  value: 0,
  getPriceWithCurrency: function(discount, currency){
    return `${this.value - (this.value * discount)} ${currency}`
  }
}

const cartWithStuff = {
  value: 300,
  products: ["Cherries", "Bananas", "Pineapples"]
}

const getPrice = cart.getPriceWithCurrency.bind(cartWithStuff, 0.2, 'PLN');

console.log(getPrice());

Jak widać tutaj nie otrzymaliśmy bezpośrednio wyniku, lecz przypisaliśmy funkcję, która dopiero zwróci nam żądany wynik do zmiennej getPrice. Wywołanie funkcji getPrice() spowoduje, że otrzymamy poprawny wynik – w naszym wypadku '240 PLN’.

Funkcja bind() jest często wykorzystywana w bibliotece React. W trakcie tworzenia nowego komponentu i funkcji w nim zawartych potrzebujemy przypisać do danej funkcji this. Możemy to zrobić na dwa sposoby: użyć funkcji strzałkowej lub też skorzystać z bind().

Wnioskiem z poprzedniego akapitu jest też to, że nie ma sensu „bindować” funkcji strzałkowych.

Mam nadzieję, że to krótkie objaśnienie trzech, bardzo ważnych funkcji rozwiało twoje wszelkie wątpliwości. Samych przykładów praktycznego wykorzystania tych funkcji jest całkiem sporo. W źródłach znajdziesz sporo ciekawych linków z przykładami, oraz materiałów, na których bazowałem pisząc ten artykuł. Jeśli masz pytania, wątpliwości, zauważyłeś błąd, lub też uważasz, że nie wspomniałem o czymś istotnym, to zachęcam do pozostawienia komentarza!