JavaScript: Metody .call i .apply
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
W tej lekcji pokażę ci dwie niesłychanie ważne metody funkcji Call i Apply które również są przydatne
jeżeli chodzi o programowanie obiektowe dlatego w tej kolejności je pokazuję kiedy już wiesz na czym
to programowanie obiektu w skrócie polega.
One są dostępne na prototypie funkcji czyli jeżeli byśmy przeszli do function prototype i zrobimy sobie z tego
dir to je tam znajdziemy.
Czyli mamy tutaj call.
O tej będziemy mówić oraz będziemy mówić o funkcji apply a w kolejnej lekcji także o bind czyli one
są dostępne na prototypie funkcji a zatem na każdej funkcji jaką utworzymy.
Stąd właśnie utworzyłem sobie tutaj funkcję którą nazwałem Say Hello I teraz pokażę ci na czym rzecz
polega.
Skoro prototypie funkcji to i na każdej funkcji jest dostępna metoda w ten sposób czyli Say Hello odwołujemy
się do tej funkcji.
Pamiętaj że gdybym tutaj wywołał tę funkcję i potem postawił kropkę to zmieniamy całkowicie kontekst.
Tutaj napisał call bo to oznacza że chce to co zwróci ta funkcja.
I na tym wywołać call ona by zwróciła w tym przypadku undefined więc mielibyśmy błąd.
Pamiętaj że jest to bardzo ważne jakby to co zwróci funkcja.
Zapominamy o tym że to było i na tym wywołujemy call.
Dlatego my chcemy to wywołać bezpośrednio na takiej funkcji.
I zauważ co stanie się jeżeli ja wywołam Say Hello Call jest to metoda więc jest to funkcja czy ją wywołujemy.
Przejdźmy tutaj cześć czyli wywołałem sobie naszą funkcję dodając Call zamiast zrobić to w ten sposób mogłem
to zrobić w ten sposób.
Efekt jest ten sam.
Więc po co nam jest taka właśnie metoda jak Call wkleję tutaj inną funkcję troszeczkę ją zmienimy i pokażę
ci na czym rzecz polega.
W poprzedniej lekcji mieliśmy taką funkcję Say Hello która odwoływała się do obiektów czyli this First
name itd.
Wiesz że jeżeli przypiszemy ją tutaj to person nazwałem ją say ona kieruje na Say Hello to jeżeli wpiszemy
Person say wpiszmy to tutaj to wywoła nam się Jan Kowalski czyli this poprawnie zostało na ten obiekt ustawione
i pobrało sobie first name oraz last name.
Natomiast teraz za pomocą call będziemy mogli to zrobić w inny sposób czyli możemy całkowicie tutaj
usunąć metodę say
Gdybyśmy chcieli i gdybyśmy chcieli wywołać metodę Say Hello na tym obiekcie to również możemy to zrobić
za pomocą Say Hello bo chcemy taką funkcję wywołać więc musimy się do niej odwołać.
Call Person.
I teraz co to oznacza pokazałam ci wcześniej że Say Hello Call wywoła taką funkcję.
Jeżeli nie podamy Person zobacz to mamy tutaj undefined bo this będzie kierowało na obiekt
globalny.
Jeżeli podam person to mamy Jan Kowalski.
Co to oznacza.
Mianowicie tylko tyle że Call wywołane na funkcji wywołuje tę funkcję ale jako pierwszy parametr możemy
przekazać co ma być dostępne pod this w tej funkcji.
Czyli to co tutaj przekażę zamieni się na słowo kluczowe this funkcji.
Dzięki temu z różnych obiektów możemy pożyczać sobie różne ich funkcje.
Tak nam to działa.
Gdyby ta funkcja przyjmowała tekst jak ja to zrobiłem jest to po to abyśmy mogli napisać tekst plus
spacja plus to co jest tutaj i chcielibyśmy go przekazać to moglibyśmy to zrobić jako drugi parametr
czyli pierwszy parametr w call.
To jest this pod tą funkcją co ma być pod this a drugi parametr.
Jest to już parametr który przyjmuje funkcję jeżeli ona będzie trzymać więcej parametrów itd to podajemy
jej tutaj w takiej samej kolejności ile chcemy ich podać nie ma problemu natomiast ona przyjmuje tylko
tekst więc go podajemy pierwszy to jest this a drugi trzeci.
I tak do n.
Są to parametry które przyjmuje funkcję więc mogę napisać Witaj w ten sposób.
I teraz funkcja zostanie wywołana.
Mamy Witaj Jan Kowalski.
Czyli dokładnie tak to działa.
say hello wykonaliśmy powiedzieliśmy this wewnątrz to ma być person czyli jeśli się odwołasz do this kropka
first name to tak do person kropka first name a pierwszy parametr który tutaj jest przekazaliśmy w tym miejscu wspomniałem
że dzięki takiej funkcji możemy sobie pożyczać funkcje dostępne gdzieś indziej.
I teraz pokażę ci jedną bardzo ciekawą rzecz na naszej stronie mam tutaj kilka elementów li które teraz
zapisze w zmiennej pobrałem je sobie do zmiennej i chciałbym na nich wykonać pętlę for each.
To wygląda jak element tablicopodobny to jest element tablicopodobny elems taka jakby tablica ale
ona nie ma metody for each.
Natomiast w tym kursie już na pewno doskonale wiesz.
Mamy metodę for each dostępną pod array prototype for each ona się tam chowa kiedy korzystamy na tablicy z for each.
To jest właśnie przezukiwany prototyp array i tam jest metoda for each czyli ta kiedy już tutaj dojdziemy
to jest nic innego jak funkcja.
A skoro jest funkcją to ma metodę call.
Czyli możemy wywołać call
I teraz kiedy na tablicy wykonujemy for each to wewnątrz ta metoda for each wie z jakim this ma do czynienia
No z tablicą na której to wykonaliśmy.
Natomiast jeżeli robimy to w ten sposób to musimy to this przekazać. Przekażemy sobie zatem elems.
Teraz mówimy wykonuje metodę for each która tam w tablicy jest zapisana w tym momencie nie ma to nic wspólnego
z tablicą po prostu dogrzebaliśymy się do tej funkcji mówimy wykonają ale chcielibyśmy przekazać element.
Proszę bardzo z tym że być może pamiętasz że metoda for each przyjmowała parametr wyglądało to w ten sposób for each
i tym parametrem była funkcja.
Więc podobnie jak tutaj z tekstem który Ci pokazałem że przekazujemy najpierw przekazujemy this czyli
elems a jako drugi parametr parametr który oryginalnie ta funkcja przyjmuje.
Skoro ona przyjmuje funkcję to możemy tę funkcję tutaj przekazać.
I taka funkcja będzie mieć jeden element bo tak to działało w przypadku tablic przekazaliśmy jej
funkcję która ma mieć jeden parametr i za każdą informacją to będzie kolejny element.
I teraz mogę się odwołać do elem style bo za każdym razem będzie to jeden element pobrany stąd i np.
kolor i przypiszemy tutaj red.
Zobaczymy czy nam to zadziała odświeżam i jak widzisz działa.
Czyli pokazywałem Ci w jednej z lekcji że moglibyśmy prototyp takiego node list tutaj rozszerzyć ale wcale tego
robić nie musimy bo możemy pożyczyć sobie taką metodę.
Teraz pokażę ci jak możemy to zrobić jeszcze w krótszy sposób komentuje zamiast do array prototype for each się odwoływać
to możemy szybko w locie utworzyć pustą tablicę odwołać się do jej for each i do call.
Różnica jest tylko tutaj w wydajności nie zauważymy różnicy.
Przy takich małych elementach gdzie jest mało elementów tablicy natomiast zastanów się co tutaj się
dzieje w array prototype for each.
Jeśli dotąd sobie dojdziemy nic nie wywołaliśmy.
My tylko dogrzebaliśmy się do funkcji która cały czas jest w pamięci.
Natomiast teraz utworzyliśmy pustą tablicę.
Jej nie było.
Utworzyliśmy pustą tablicę i odwołaliśmy się do kropka for each
Czyli zostało sprawdzone czy na tej tablicy jest metoda for each.
Nie ma więc zostało sprawdzone czy na prototypie tej tablicy a więc array prototype jest metoda for each, jest,
została ona tutaj zwrócona czyli z punktu widzenia wydajnościowego to jest trochę mniej wydajne ale
jest krótsze w zapisie bo tu tworzymy nową tablicę a potem szukamy gdzie jest metoda for each tej tablicy
a tutaj bezpośrednio wskazujemy słuchaj tam jest taka metoda wykonaj to dla nas w ten oto sposób teraz
pokażę ci drugą funkcję jest to funkcja call więc ja utworzę sobie tutaj nową funkcję zrobimy troszeczkę
miejsca w ten sposób nazwałem ją sum i ona będzie nam dodawać te trzy argumenty które podamy więc jeżeli sobie
wywołam sum i napiszę tutaj 2 3 i 4 to powinny one wszystkie do siebie zostać dodane możemy to sprawdzić
jak to będzie wyglądać w konsoli po odświeżeniu
Proszę bardzo.
9 prawda.
Wszystkie z nich zostały dodane tutaj jest console log więc zostało to wyświetlone.
I teraz jak działa metoda apply która jest bardzo podobna do call.
Otóż znowu odwołujemy się do funkcji czyli sum apply piszemy tutaj znowu musimy podać jako pierwszy parametr
this czyli co ma być w tej funkcji widziane pod this.
Zauważ że tutaj nigdzie nie korzystamy z this więc możemy przekazać to w ten sposób.
Niech cię to nie zmyli w tym miejscu gdzie jesteśmy teraz zapomnij o tym co jest tutaj wyżej.
W tym miejscu this kieruje na obiekt globalny w takiej funkcji gdybyśmy ją wywołali normalnie jako sum dokładnie
będzie to w ten sam sposób działać czyli jeżeli tutaj przekażę this to się znajdzie w tej funkcji.
Nie korzystamy z tego więc nie ma żadnego znaczenia ale ten parametr musimy podać abyśmy mogli podać
drugi a drugi parametr zamiast podawać po kolei te wszystkie trzy parametry bo gdybyśmy tutaj skorzystali
z call zauważ to musielibyśmy podać 2 3 i 4 zadziałałoby.
Proszę bardzo mamy dziewięć natomiast apply różni się jedynie tym że drugim parametrem i trzecim i
czwartym itd nie są właśnie poszczególne parametry jakie przyjmuje funkcja ale ich tablica czyli tutaj
możemy to tak napisać.
Zatem można powiedzieć że funkcja call przyjmuje this i potem niezliczoną liczbę parametrów które są przekazane
do funkcji natomiast apply przyjmuje this i tylko jeden parametr jeszcze tutaj który jest tablicą.
Zobaczmy jak to będzie wyglądać.
Działa to w ten sam sposób czyli o apply musisz myśleć tak że tutaj możesz przekazać tablicę z parametrami
i każdy z nich zostanie odpowiednio podstawiony do funkcji sum czyli to tutaj.
To tutaj to tutaj jeżeli byś tutaj wpisał więcej parametrów jeszcze 5 nie ma problemu bo ta funkcja
nie przyjmuje już czwartego parametru więc on zostanie po prostu zignorowany.
Czyli różnica między apply i call jest tylko taka że apply przyjmuje jako drugi parametr tablicę z parametrami
które potem poszczególnie do funkcji są przypisywane.