W tym artykule omówimy kilka podstawowych funkcji, które możemy wykorzystać, programując w JavaScript. Funkcje te to call, apply i 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, 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

• Function.prototype.call()
• Function.prototype.apply()
• Function.prototype.bind()
• bind() obok call() i apply() jako piękna natura języka
• JavaScript .call() .apply() and .bind() — explained to a total noob
• JavaScript: Wykorzystanie metod call() oraz apply() w praktyce
• What is THIS in JavaScript?
• Examples of this and bind – Object Creation in JavaScript P2 – FunFunFunction #44
• bind and this – Object Creation in JavaScript P1 – FunFunFunction #43
• Understanding Functions and 'this’ In The World of ES2017
• This w JavaScript

Czy wiesz, że devszczepaniak.pl jest na Facebooku?

Chcesz otrzymywać informację o nowych wpisach zaraz po publikacji?
Koniecznie zaobserwuj devszczepaniak.pl na Facebooku.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

Chcesz docenić moją pracę? Postaw mi kawę!