Call bind apply - okładka

Omówienie funkcji call, bind i apply

Opublikowano Kategorie JavaScriptCzas czytania 4min

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

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.

Call bind apply - kod

Funkcja call

Całość działania funkcji call opiera się o słowo kluczowe this. Pierwszym parametrem, jaki 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.


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.


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.


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ć, 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!

 Źródła i materiały dodatkowe

Dominik Szczepaniak

Zawodowo Senior Software Engineer w CKSource. Prywatnie bloger, fan włoskiej kuchni, miłośnik jazdy na rowerze i treningu siłowego.

Inne wpisy, które mogą Cię zainteresować

Zapisz się na mailing i odbierz e-booka

Zapisując się na mój mailing, otrzymasz darmowy egzemplarz e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer! Będziesz też otrzymywać wartościowe treści i powiadomienia o nowych wpisach na skrzynkę e-mail.

Subscribe
Powiadom o
guest

0 komentarzy
Inline Feedbacks
View all comments