JavaScript: Korzystanie z prototypu
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, w jaki sposób możemy, tworząc własne konstruktory, czyli możemy o nich mówić jako
klasy, korzystać z prototypu, który jest, jak już widzisz, mam nadzieję rozumiesz, w JavaScripcie bardzo przydatny
i powinniśmy z niego korzystać.
Mam tutaj przykład, który zostawiliśmy w lekcji poprzedniej.
Na razie nie przejmuj się, że jest to person. Mógłbyś sobie pomyśleć, że to nie jest jakoś bardzo życiowe czy
przydatne. Na takim przykładzie najlepiej wytłumaczyć o co chodzi z programowaniem obiektowym. Natomiast
zapewniam Cię, że jeszcze w tym kursie będziemy obiektowo, czyli w ten sposób pisać różne przykłady np.
własną bibliotekę AJAX, która będzie wysyłać zapytania do serwera.
Więc to jest tylko przykład.
Wspomniałem ci w lekcji poprzedniej, że to co tutaj zrobiliśmy fajnie wygląda i teoretycznie dobrze działa.
Możemy na person1 czy person2 odwołać się do sayHello
i wtedy ten operator this wie, skąd ma sobie pobrać odpowiednie dane i nam je wyświetlić.
Natomiast wspomniałem również, że za każdym razem, kiedy tworzymy nowy obiekt, to tworzymy taką funkcję
w pamięci komputera, która jest identyczna.
Dlatego nie jest najlepszym rozwiązaniem,
przechowywanie takiej funkcji tutaj.
Stąd ja ją teraz wytnę. Przestanie nam ona działać, ale wrzucę ją tutaj i teraz zamiast this odwołajmy
się do
Person.prototype.
Ja przypomnę ci jeszcze, zanim odświeżę stronę co jest pod Person.prototype.
Jest to pusty obiekt, w którym mamy tylko konstruktor, automatycznie utworzoną właściwość, która kieruje
na naszą funkcję w ten oto sposób.
Czyli jest to zwykły obiekt.
Możemy do niego dodawać co chcemy.
A wiesz, że w JavaScript możemy dodawać, właśnie wpisując po kropce, a więc piszę sobie sayHello i to się
równa funkcja.
Tutaj this zostaje w ten sam sposób no i wszystko gra, czyli w ten sposób się przypisuje do prototypu
jakieś nowe metody czy właściwości.
Przypisałem to tutaj. No i odświeżmy sobie stronę i sprawdźmy teraz czy person1 nadal ma metodę sayHello.
Ma. Zróbmy to samo
na person2. Nie ma żadnego zdziwienia.
Wszystko nam tutaj zadziałało. Teraz, jak możesz się domyślić, ta metoda nie jest dostępna bezpośrednio
na obiektach. Jeżeli zrobimy dir(person1), proszę bardzo, nie ma tutaj takiej metody. Mamy fName oraz
lName.
Owszem, to jest przypisane tutaj bezpośrednio ale później mamy proto czyli prototyp.
Jeżeli tutaj kliknę, widzisz, że on kieruje na person, to przechodzimy do tego prototypu. Czyli dokładnie
jakbyśmy wpisali person.prototype.
Tam w środku było constructor i teraz dodaliśmy sayHello, czyli jest to ta funkcja.
Możemy sobie tutaj do niej zajrzeć.
No i to jest właśnie niezwykle ciekawe.
Przy okazji zauważ jedną ciekawą rzecz, którą tutaj widać. Jeżeli przejdziemy do funkcji, to okazuje się,
że funkcja również ma swój prototyp, w ten sposób. I możemy tym łańcuchem przechodzić dalej i dalej. Teraz
jesteśmy w prototypie funkcji czyli function.prototype.
Później dojdziemy do samej góry do prototypu obiektu.
Natomiast to nie jest aż tak istotne.
Ja w tym kursie pokażę ci jeszcze metody dostępne na funkcjach, które są właśnie dziedziczone z prototypu.
Niemniej jednak, jak widzisz, do własnego prototypu dodaliśmy sobie jakąś metodę i kolejną metodę dokładnie
w ten sam sposób możemy dodawać. W ten sposób tylko raz zdefiniowaliśmy funkcję, która jest zapisana w pamięci
operacyjnej komputera.
I nieważne jak wiele otworzymy takich obiektów,
kiedy wywołamy person1.sayHello to sprawdzamy czy taki obiekt ma taką metodę. Co jest właśnie
ciekawe i może ci to jeszcze raz pokażę, person1.sayHello.
I nadpisałem sobie metodę dostępną na person, w ten sposób, że zwraca ona jakby to samo, ale powiększone
litery będą. Dlatego, że fName to był string.
Na stringu mamy taką oto metodę. To wszystko tutaj jest bardzo ciekawe, jeżeli się zastanowimy, w jaki sposób
to działa.
Bo odwołujemy się do this.fName
No i to będzie string.
Kiedy na stringu próbujemy się odwołać do jakiejś metody, to on w locie, za naszymi plecami, jest konwertowany
do new Strin.
W ten sposób, no i znowu możemy na nim skorzystać z metody toUpperCase,
bo gdybyśmy przeszli do String.prototype, to tam będzie taka metoda jak toUpperCase.
Kiedy człowiek zaczyna to rozumieć, to naprawdę fajnie to się wszystko składa do kupy.
Niemniej jednak to jest tylko dygresja, bo chciałem ci pokazać, że nadpisałem na person1 metodę i teraz
jeśli napiszę person1.sayHello, to zostanie nam zwrócony Jan Kowalski, a na person2 zostanie
zwrócone normalnie sayHello.
Czyli jakby to Tomasz Nowak z małych liter. W ten sposób to działa, jak już ci mówiłem, jeżeli się odwołujemy
do obiektu kropka sayHello to sprawdzamy czy na tym obiekcie jest taka metoda.
W tym przypadku jest, no to zwracamy taką właśnie metodę. W przypadku person2 nie ma i wtedy sprawdzamy
prototyp. Natomiast co jest też niezwykle ciekawe, to gdybyśmy tutaj napisali u góry, może zamiast tego
object.prototype.sayHello, to sobie może wyrzucę, to jeżeli teraz się odwołamy do person1.sayHello, to
zostało zwrócone Jan Kowalski.
Ale jeżeli byśmy przeszli do person.prototype, to tutaj możemy zerknąć,
nie ma czegoś takiego. Ale, że person.prototype, co już ci pokazywałem, to jest obiekt,
no to przechodzimy dalej, do jego prototypu, co możemy zobaczyć tutaj, jest to object. On ma tutaj bardzo
wiele funkcji, ale skoro do object.prototype dodałem sayHello, to ona gdzieś tutaj się znajdzie, jak widzisz.
I to jest o tyle ciekawe, że teraz każdy obiekt w JavaScript jaki utworzymy np. taka tablica, będzie miała dostęp,
co nam tutaj się podświetli, do sayHello. Akurat się nie podświetliło, ale ma do tego dostęp. Tylko, że zostało zwrócone undefined,
bo próbowaliśmy się tutaj odwołać do this.fName, czyli jakby do tablicy, do first name takiej tablicy,
a tego tam nie było.
No i kolejna ciekawa rzecz, którą muszę ci teraz pokazać jest taka, że jeżeli utworzymy sobie właśnie tablicę,
w ten sposób, jakąś pustą tablicę i przypiszemy jej fName, na przykład będzie to tablica i lName, tablica Nowakowska.
Tak ona się będzie nazywać. To jeżeli znowu będziemy się chcieli odwołać, ale nie to byle jakiej tablicy, ale
do naszej arr,
to się okaże, że wszystko zadziała.
Czyli wywołaliśmy na arr sayHello i sprawdzamy czy arr ma tutaj sayHallo.
Nie ma.
Przechodzimy do arr.prototype. Nie ma.
Przechodzimy do object.prototype. Jest.
Wywołujemy. I teraz object.prototype.sayHello sprawdza sobie this.fName. Dokładnie w ten sam sposób
to jest sprawdzane, czyli przechodzimy sobie do tego obiektu,
czy on ma zapisane coś takiego jak fName.
Jest, czyli podstawiamy
tablicę this.lName. Jest.
Natomiast gdyby nie było, to znowu przechodzili byśmy dalej no i gdybyśmy tutaj napisali, co akurat nie
jest zbyt dobrym pomysłem, ale moglibyśmy Array.prototype i następnie fName, w ten sposób, to dodalibyśmy
to do prototypu.
I teraz tutaj zostanie zwrócone dokładnie to samo co wcześniej.
Zobaczymy.
Tablica Nowakowska, czyli to co mieliśmy tutaj, ale jeżeli teraz utworzę jakąkolwiek tablicę, tylko że
akurat muszę ją tak opleść. I odwołamy się do sayHello, w ten sposób, to zostanie nam zwrócone
tablica Kowalska, bo zrobiłem pustą tablicę znowu, tak jak ci mówiłem, sprawdziliśmy to wszystko, doszliśmy
do object.prototype.sayHello.
I tutaj jest sprawdzane czy this fName istnieje. Na tej tablicy tego nie ma więc sprawdzamy Array.prototype i
tam to się znalazło.
Więc jest to taki przykład trochę bardziej abstrakcyjny, ale mam nadzieję, że na nim widzisz jak to działa.
Wrócimy tutaj do person, do naszego przykładu, to możemy usunąć,
czyli w tym przypadku sayHello dodaliśmy do person.prototype,
żadne inne obiekty nie będą tego dziedziczyć, nie ma żadnego problemu. Tylko obiekty utworzone właśnie
przez person.