JavaScript: Metoda .toString
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 chciałbym krótko omówić metodę toString, z którą się w JavaScript możesz wielokrotnie spotkać.
I teraz pokażę ci może najpierw na konsoli na czym sprawa polega.
Jeżeli utworzymy sobie jakąkolwiek tablicę i powiedzmy zrobimy tu 1, 2, oplotę ją w ten sposób, żebym nie
musiał zapisywać zmiennej.
Teraz mogę się do różnych jej właściwości odwołać. Odwałjmy się do toString i zobaczmy co się stanie.
Jak widzisz zostało to zamienione na String, rzeczywiście. Bo o to chodzi w tej metodzie.
Czyli mamy tutaj cudzysłowy 1, 2. No i ciekawe jak to się dzieje, że tablica po dodaniu toString ma taką
metodę, zamienia się w ten sposób. Zerknijmy sobie do Array.prototype.
Co tam mamy. Musimy zrobić dir, OK.
I czy jest tutaj metoda toString.
Okazuje się, że taka metoda tutaj się znajduje. Nie możemy sprawdzić co jest wewnątrz. Bo jest to natywna
metoda. Ale taka metoda tutaj jest.
Teraz możemy się odwołać np. do date.prototype. Zrobimy sobie znowu dir i okaże się, że date ma tutaj bardzo
wiele różnych metod. Ale też ma metodę toString
w tym miejscu. Natomiast są takie obiekty w JavaScript, które tej metody nie mają.
Jeżeli jej nie mają, to dziedziczą ją.
Myślę, że na tym etapie doskonale zdajesz sobie sprawę skąd z Object.prototype,
tutaj jest taka metoda jak toString. Czyli każdy obiekt w JavaScript tak czy siak będzie miał metodę toString.
Mówiąc obiekt nie mam na myśli takiego zapisu, ale wszystkiego co jest w JavaScrpt, czyli String, number
itd.
Każdy będzie miał taką metodę toString. Czyli skoro ona jest Object.prototype, wszyscy ją dziedziczą, ale jak
widziałeś np. date ma swoją metodę, czy Array, a dopiero później dziedziczy z object.prototype. Czyli implementuje
sobie własną metodę.
I teraz o co chodzi z tą metodą.
Po co ona nam jest potrzebna.
Czasami po to, że chcemy wywołać w ten sposób, np. tablicę. Ale czasami po to, że JavaScript ją automatycznie
wywołuje.
No i jak to jest.
Stwórzmy sobie taką tablicę 1, 2. Oplotę ją w ten sposób i spróbujmy do tego dodać String "hejo".
Zobacz co się stało. Mamy rezultat String, bo zrobiliśmy konkatenację. Ale dodaliśmy tablicę i teraz JavaScript
automatycznie na takim obiekcie wywoła metodę toString. To zostało zwrócone, pokazywałem ci wcześniej.
i to co zostało właśnie tutaj zwrócone, czyli taki String dodał do naszego stringu.
Czyli są takie przypadki, gdzie JavaScript potrzebuje stringowej reprezentacji, czyli tekstowej reprezentacji
jakiegoś obiektu. I wtedy wywołuje jego metodę toString.
Co by się stało gdybyśmy skorzystali z funkcji alert i przekazali tutaj jakiś obiekt, w którym cokolwiek
może być. Może być firstName: "John",
zauważ, tutaj z kolei zostało zwrócone object Object, a nie jak moglibyśmy się spodziewać, jakaś tekstowa
reprezentacja first name
John. Natomiast to się skądś wzięło. To się właśnie wzięło stąd, że jeżeli teraz tu bym sobie wyciął, tutaj.
Oplotę to również takimi nawiasami i wywołam toString, to zostanie nam zwrócony object Object.
Tak to działa domyślnie na większości z tych obiektów, czyli object Object.
Gdybym zrobił coś podobnego, na przykład na wyrażeniu regularnym, o którym jeszcze będziemy mówić w tym
kursie. O wrażeniach regularnych. Mamy tu jakiekolwiek wyrażenie.
Zróbmy sobie na nim toString. To wygląda z kolei to w ten sposób. Czyli każdy obiekt sobie coś takiego implementuje.
I teraz chodzi o to, że my również możemy w naszych obiektach coś takiego zaimplementować wtedy, kiedy właśnie
ktoś będzie próbował to dodać albo wywołać metodę toString, albo przekaże to na przykład do funkcji alert.
Jak widzisz w console.log często jak coś tutaj przekazujemy, to również zamieniane na toString. Ale nie
zawsze. Bo jeżeli zrobimy console.log normalną tablicę, to nam ją pokaże.
Ale czasami to, co tutaj przekażemy jest również zamieniane na string.
Dlatego lepiej korzystać z console.dir, o którym Ci mówiłem. Jesteśmy teraz w przykładzie, z którym skończyliśmy
w poprzedniej lekcji. I chciałbym Ci tylko pokazać co stanie się, kiedy na naszym obiekcie, którymś z naszych,
wywołamy sobie metodę toString.
Mamy tutaj square np. Zostanie nam zwrócone object Object.
Domyślasz się pewnie dlaczego.
Otóż my takiej metody w prototypie nie mamy. Więc została ona znaleziona w Object.prototype i tak
ona wygląda. Więc dobrze byłoby ją nadpisać. I możemy zrobić tak, że jeżeli na square, na naszym kwadracie
wywołamy toString to np. zostanie zwrócona jego nazwa albo boki, albo coś w tym stylu.
Natomiast my sobie to zaimplementujemy, tutaj. Nasz Shape bo wiesz, że wszystkie nasze obiekty będą dziedziczyć
tutaj z Shape. Więc nasz Shape.prototype możemy toString sobie zaimplementować.
ToString. W ten sposób przesłonimy toString, który byłby wyżej czyli w Object.prototype.
Będzie to funkcja, ok. I będę chciał tutaj zwrócić, podobnie jak widzieliśmy to tutaj, coś takiego. Tylko zamiast
object Object będziemy chcieli tutaj zwrócić w naszym przypadku nazwę naszego obiektu. Moglibyśmy tutaj, gdybyśmy
tę nazwę nazywali np. Rectangle to by zwracało Rectangle, ale dodajmy tutaj sobie coś, w ten sposób. Ale skoro
po polsku je nazwałem, no to polskie nazwy będą zwracane. Po to nam były te nazwy. Jeżeli przerabiasz po
kolei ten kurs, to pewnie byłeś ciekaw po co te nazwy tutaj podajemy. Po to właśnie, że teraz możemy się odwołać
do this_name,
w ten oto sposób. I zostanie to poprawnie zwrócone. Czyli nieważne czy na Rectangle, czy na Triangle, czy na Square,
to wywołamy, zostanie sprawdzony prototyp. Jeśli tego nie znajdzie, pójdzie w górę w tym łańcuchu prototypów, aż
dojdzie do Shape, z którego jak wiesz dziedziczy.
Tam to znajdzie i zwróci nam return "[object " + this._name+ "]"
i zamykający nawias kwadratowy. Zerknijmy jak to będzie wyglądać. Object kwadrat.
Jak widzisz działa. Triangle. Object Trójkąt.
No i tak samo będzie w przypadku użycia Rectangle.
No i to jest taka dobra praktyka, kiedy tworzymy własne obiekty. Jeżeli jest jakikolwiek sens, aby to było
w ten sposób zwracane to możemy to zrobić. I teraz gdybyśmy chcieli jakąkolwiek np. tablicę, co też nie
ma tutaj specjalnie większego sensu, ale może się zdarzyć. Chodzi generalnie o ten kontekst, kiedy ja JavaScript potrzebuje
stringu i będzie i to konwertował.
Kiedy będziemy próbowali dodać taką tablicę do naszego Triangle, to jak widzisz tablica została zamieniona na
String, przez jej metodę toString. A nasz obiekt przez naszą metodę i to zostało do siebie dodane.
Jak wspominałem możesz inaczej zaimplementować tę metodę. Nie musi zwracać tego w takiej konwencji. Czyli
nawias kwadratowy, object i nazwa. Może tutaj zwracać coś innego np. jakąś liczbową reprezentację.
Natomiast sama nazwa toString sprawia, że powinno to być zwrócone jako String a nie np. jako Number.