JavaScript: Metoda .bind
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 bardzo ważną metodę bind która jest dostępna na prototypie funkcji a co za tym
idzie już wiesz.
Jest dostępna na funkcjach Pokazałem Ci w lekcjach poprzednich że mamy metodę call i apply które pozwalają
wywołać jakąś funkcję lub metodę ze słowem kluczowym this jakie nas interesuje.
Więc gdybyśmy chcieli tutaj wywołać Say Hello to pisaliśmy Say Hello call i podawałem person czyli chcemy
aby wywołać Say Hello gdzie this będzie kierować na Person.
Natomiast bardzo ważna uwaga.
Call i Apply wykonywały funkcje czyli w tym momencie ta funkcja będzie odpalona.
A co jeżeli chcemy zapisać sobie referencje do nowej funkcji która będzie później odpalona która będzie
miała odpowiedni this ustawioną już za nas.
Może się to wydawać skomplikowane ale pokażę ci teraz jak to zrobić.
Utworzymy zmienną hello równa się i teraz zamiast call skorzystamy z bind.
Jest taka metoda dostępna na funkcji również do niej jako pierwszy parametr przekazujemy this czyli to
co pod funkcją say Hello ma być pod this.
Natomiast jeżeli to zrobię zauważ że mam tutaj console log sprawdźmy sobie w przeglądarce nic się nie wykonało
Nic tutaj nie ma.
Czyli ta metoda nie wywołuje funkcji tak jak call ona zwraca nam nową funkcję do Hello.
Sprawdźmy teraz type of
hello w ten sposób okazuje się że jest to funkcja Jeżeli piszemy Hello mamy function native code czyli nie możemy
zobaczyć jaki tam jest kod bo właśnie bind nam to zwróciło.
Natomiast co ciekawe to Hello.
Jest to funkcja a więc możemy ją wywołać a więc wywołajmy ją sobie i mamy.
undefined Jan Kowalski undefined to jest tylko ten tekst którego jeszcze nie przekazaliśmy.
Natomiast zauważ że wysłaliśmy funkcję Say Hello która ma od razu ustawiony poprawny this na ten obiekt
dlatego że w tym momencie jakby na sztywno przypisaliśmy do funkcji this jako ten obiekt.
Oczywiście gdybyśmy teraz się odwołali do say hello i ją wykonali.
Ona nie została w ogóle w żaden sposób zmieniona tylko tutaj została zwrócona nowa funkcja.
I teraz co możemy podawać do bind jako kolejny parametr.
Tutaj możemy podawać parametry które będą przekazane do funkcji.
Dlatego mam tutaj tekst więc mogę tutaj napisać Witaj w ten oto sposób.
To oznacza że zostanie nam zwrócona jakby nowa kopia tej funkcji Say Hello do Hello.
I zauważ że jeśli teraz odświeżę i wywołam hello ani nie podaje tutaj person ani nie podaje Witaj
a mamy Witaj Jan Kowalski.
Natomiast co ciekawe gdybym tego nie zrobił zobacz jeszcze raz wywołam hello
będziemy mieli undefined ale do tego Hello mogę przekazać Witaj i to też zostanie dalej przekazane czyli tutaj została
zapisana dla nas nowa kopia funkcji Say Hello do której możemy przekazać parametry jeśli chcemy jak
najbardziej ale przy jej wywołaniu mamy pewność że this będzie ustawiony na obiekt który tutaj przekazaliśmy.
Natomiast jeśli chcemy zbindować te parametry i je przekazać na przykład Witaj to od razu nam to działa
możemy zobaczyć przy okazji sprawdźmy co by było gdybyśmy podali tutaj coś innego.
Jak widzisz zostanie to zignorowane więc tak działa funkcja bind i będziemy z niej również jeszcze
w tym kursie korzystać.
Jest ona bardzo przydatna.
Natomiast abyś bardzo dobrze zrozumiał jak działa ta funkcja to nie byłbym sobą gdyby nie pokazał jak
możemy ją zrobić sami więc zróbmy sobie funkcję którą nazwiemy bind
Nie będzie to metoda nie będziemy jej dodawać do prototypu funkcji chociaż wiesz że moglibyśmy napisać
function prototype.
i dodać tam bind ja chcę to zrobić jako funkcję.
Będzie to funkcja więc zastanówmy się co potrzebuje taka metoda bind ona jest wywoływana na obiekt na
obiekcie czyli na funkcji więc potrzebuje funkcji.
Jeżeli ja utworzymy w ten sposób no to będziemy taką funkcję musieli tam przekazać nazwijmy to fn.
Następnie potrzebuje obiektu który będzie this pod nowo wykonaną funkcją nazwijmy to obiekt i następnie
tutaj może potrzebować parametrów które można tutaj wpisać ale ich to może być dowolna ilość więc nie
będę już tego podawał.
Zróbmy to w ten sposób i zauważ co się stało kiedy wywołaliśmy bind na Say Hello zwróciło nam tutaj funkcję
czyli na pewno będzie zwracać funkcję i kiedy sobie właśnie zrobimy tutaj var hello 2 na przykład to będzie
bind w ten sposób czyli wywołuje sobie bind
Na razie nic nie przekazałem zwróci nam funkcję do say Hello 2 zobaczmy jeśli sobie napiszemy hello 2.
Rzeczywiście jest to funkcja type of hello 2 zwróci nam funkcję czyli na pewno musi zwrócić funkcję.
Natomiast jak teraz zrobić aby pod tą zwróconą funkcją this było ustawione na obiekt który tutaj przekażemy
bo ja bym chciał tutaj napisać bind Say Hello.
Jak widzisz zrobiliśmy po prostu funkcję a nie metodę więc tutaj podajemy to say hello podajemy to w
tym miejscu czyli chce zbindować tę funkcję więc ją przekazałem czyli tutaj pod fn dla nas ona będzie
dostępna i następnie obiekt czyli wiesz już po lekcji z call i apply że skoro tu mamy funkcję bo ją tutaj przekazałem
to możemy zrobić fn call wywołać tą funkcję i napisać obj
Czyli zrobimy w tym miejscu dokładnie to samo jakby po wyjściu na zewnątrz i zamiast fn które przekazujemy
napisał Say Hello.
A zamiast obj object który tutaj przekażemy czy obiekt tutaj napiszemy person tak czyli Person przekazuje
on wpada nam tutaj czyli to jest dokładnie to samo jak bym tutaj napisał Call person w ten sposób czyli
to co robię tutaj w środku.
Tylko tu jest inna nazwa bo to przekazujemy przekazałem funkcję wpadła tutaj i robię robię to w tym
miejscu chcę ją wywołać a w niej this ma kierować na obiekt który to przekazaliśmy czyli Person.
Zobaczmy czy to zadziała.
Hello 2.
Wywołujemy ją i jak widzisz działa to bez problemu.
Dlatego tutaj zwracam funkcję a nie robię tego od razu bo gdybyśmy nie zwracali funkcji ale robili to
od razu to po wywołaniu bind.
Jak widzisz od razu byśmy to wszystko wywołali.
No i ta funkcja nic nie zwraca więc do naszego hello 2 zostałoby zwrócone.
undefined więc my musimy zwrócić funkcję która dopiero po wywołaniu będzie nam robić coś takiego.
Przy okazji korzystamy tutaj z domknięć o których jeszcze w tym kursie powiem działa.
Natomiast chcielibyśmy jeszcze dać tutaj możliwość przekazywania poszczególnych parametrów czyli tutaj
przekazałem Say Hello i person to są te dwa parametry.
A pamiętasz że do bind jak ci mówiłem dowolną liczbę innych parametrów możemy przekazać w pierwszym kursie czyli
w kursie JavaScript od podstaw.
Pokazałem że w każdej funkcji mamy taką specjalną zmienną jak arguments która będzie nam przechowywać
wszystko co zostanie tutaj przekazane jeżeli zrobimy console log arguments zobaczmy to została tam przekazana
funkcja.
To jest taki obiekt tablicopodobny tutaj tutaj i tutaj obiekt.
Jeżeli teraz przekaże tutaj witaj.
Czyli nie robi nic innego jak w przypadku tej metody to chociaż tutaj nie zrobiłem czegoś takiego jak
tekst czy jakiś inny parametr to w arguments będzie to dostępne.
Zobacz jest tutaj dostępne.
Czyli generalnie tutaj może być dowolna liczba jeszcze innych parametrów.
Chcielibyśmy zrobić także z tej zmiennej arguments wyciągamy dwa pierwsze bo one zawsze będą musiały
być podane czyli this i obiekt w naszej metodzie a każdy czyli 3 4 5 6 i inny będzie dla nas podany
jako taki parametr tak jakby tutaj był po przecinku podawany.
Teraz jak możemy to zrobić na tablicy moglibyśmy skorzystać z metody slice i tablicę obciąć.
Ale że arguments jest takim obiektem tablicpodobnym to nie ma takiej metody jak slice czyli nie mogę napisać
arguments slice.
Ale ty już wiesz że możemy sobie tę metodę pożyczyć od tablicy czyli napiszemy array prototype slice.
Czyli znowu weszliśmy do prototypu array ale i tam jest taka funkcja jak slice wykonamy ją poprzez call jako
this przekażemy jej arguments a jako drugi parametr musimy przekazać odkąd chcemy wycinać czyli slice
przyjmuje nam powiedzmy coś takiego czyli dwa.
To znaczy że wytnie nam wszystko po wyżej drugiego elementu tablicy czyli tak jak wspomniałem te dwa pierwsze
czyli funkcje i obiekt chcemy wyciąć i to co nam zwróci.
to jest ciekawe to już jest prawdziwa tablica więc tutaj po prostu przekażemy dwójkę.
I to musimy tutaj złapać nazwijmy to args w ten sposób i teraz zrobię console log abyś wiedział o co chodzi.
I jak widzisz Witaj tylko mamy czyli dwa pierwsze odcięliśmy a reszta została zwrócona.
I teraz jeżeli do mojej funkcji bind przekazywał jeszcze inne Hello to zawsze je będę miał tutaj w tablicy.
I teraz chciałbym Ci przypomnieć poprzednią lekcję i teraz zauważysz po co to jest potrzebne.
Mówiłem ci że call wywoła nam funkcję którą przekażemy tutaj z this które przekażemy tutaj i tu możemy
przekazywać poszczególne parametry czyli np. Witaj itd.
A apply różni się tylko tym że jako drugi parametr przekazujemy tablicę.
Coś ci to już mówi.
Pod args mamy tablicę czyli przekażemy ją tutaj i stworzyliśmy poprawnie działającą bind.
Gdybyśmy ją przypisali do function prototype bind to moglibyśmy napisać bind która już się tam znajduje w starszych przeglądarkach
mogliśmy to robić i mogliśmy wtedy z niej korzystać ja chciałem to zrobić jako funkcję.
Czyli teraz do hello 2 zostanie zwrócona nowa funkcja którą wykonamy po hello 2.
To wywołamy funkcję przekazaną tutaj której podamy apply jako person czyli this ma być Person a jako
poszczególne parametry to co podam tutaj zerknijmy sobie.
No i wszystko działa jak marzenie.
Mam nadzieję że dobrze to zrozumiałeś.
Chciałem ci też pokazać jak możemy odwzorować funkcje abyś lepiej zrozumiał co się tak naprawdę dzieje
pod spodem.