JavaScript: Problemy z this
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 jakie mogą być problemy ze słowem kluczowym this, które w różnych miejscach w naszych
funkcjach się pojawia.
Przejdziemy sobie do kodu. I stworzyłem taką funkcję, którą nazwałem sayHello.
Chciałbym żeby ona zwróciła this.firstName plus this.lastName, OK. No to wywołają taką funkcję. W zasadzie
zróbmy sobie to tutaj. sayHello, ona tu będzie dostępna.
Undefined i undefined.
Ok.
Nie jesteśmy bardzo zdziwieni. No trudno żeby coś nam wywołała. Skoro nie mamy zapisanych takich właściwości
jak firstName oraz lastName.
Natomiast gdybyśmy się zastanowili, to dlaczego w ogóle do this mamy tutaj dostęp.
Co to jest this w takiej funkcji.
Nie jesteśmy w jakby żadnym obiekcie, nie jesteśmy nigdzie.
Więc zróbmy sobie tutaj consilsole.log(this).
Co to jest this.
Sprawdźmy, wywołajmy sobie taką metodę.
W zasadzie funkcję. Ok, this
najwyraźniej jest to Window.
I faktycznie tak jest. W globalnym zakresie, w języku JavaScript albo w każdej funkcji która nie jest
wywołana w jakiś specjalny sposób np. z call czy apply,
co pokaże w kolejnej lekcji. Albo jeżeli nie jesteśmy w obiekcie. Bo wiesz, że jeżeli mieliśmy obiekty,
to wewnątrz this kierowało na ten obiekt.
Czyli w takiej zwykłej funkcji albo tutaj, całkiem w globalnym zakresie, this kieruje na obiekt globalny.
W przypadku obiektowego modelu dokumentu, czyli kiedy jesteśmy w przeglądarce, to będzie to obiekt Window.
Strict mod, o którym będziemy jeszcze mówić w tym kursie
będzie inaczej. Ale normalnie tak to wygląda.
Czyli w momencie, kiedy tutaj próbowaliśmy się odwołać do this.firstName. to tak naprawdę odwoływaliliśmy się do
window.firstName i został nam zwrócony undefined.
Bo gdybyśmy napisali firstName, w ten sposób, to mielibyśmy błąd. Bo firstName w taki sposób nie istnieje. Ale kiedy
odwołujemy się do jakiegoś istniejącego obiektu i do nieistniejącej właściwości, to nigdy nie mamy błędu.
Mamy ewentualnie undefined. Ok, czyli wiemy już, że wywołując taką funkcję po prostu próbujemy znaleźć
Window.firstName i window.lastName.
Okej, no to zróbmy sobie tutaj dwie zmienne. First.Name. Utworzyłem dwie zmienne.
Obydwie są ze słowem var bo tutaj jest przecinek. I co się stanie, kiedy znowu wywołamy taką funkcję?
Zróbmy to ponownie, tutaj w konsoli. I uwaga, mamy Jan Kowalski.
Dlaczego?
Dlaczego teraz this.firstName czyli window.firstName kieruje na tę nazwę, która jest tutaj na tę wartość.
Z tego powodu, że jeżeli tworzymy zmienne, ja już o tym mówiłem w kursie podstawowym, nie oplecione żadną
funkcją, to są one od razu globalne. A jak są globalne, to możemy się do nich odwołać tutaj globalnie. Co
cały czas robimy w tym kursie po to, abym ci mógł to pokazywać.
Czyli możemy się odwołać do firstName, no bo ją utworzyłem. Ale tak samo do window.firstName
Dokładnie w ten sam sposób. Czyli globalne funkcje są dostępne na Window. Tak samo alert na przykład
jest dostępne dlatego że to jest Window alert.
Tak naprawdę gdybyśmy się odwołali do window alert to jak widzisz mamy tutaj taką funkcję OK.
Czyli teraz już wiesz o co chodzi.
this może kierować na window jeżeli nie jest to w inny sposób podane i this firstName to będzie globalna
zmienna.
Ok w takim razie teraz kuleje tutaj dwa obiekty.
Mamy person i person2 i tutaj metoda sayHello takiego obiektu mogłaby być zrobiona w ten sposób.
Mogłaby to być funkcja w kursie podstawowym też to pokazywały.
Tutaj chyba nie byłoby zdziwienia, że this kieruje właśnie na ten obiekt czyli firstName i lastName,
tutaj działałoby to normalnie ale co stanie się jeżeli ja tutaj piszę referencje do funkcji say
hello która jest wyżej czyli wywołując person say hello to by mogło się nawet inaczej nazywać tak naprawdę
zostaniemy przekierowani do tej funkcji i ją wywołamy.
Co się wtedy stanie w przypadku person i person2 a więc Person Say Hello.
Jan Kowalski czyli ta funkcja poprawnie przedstawiła słowo this na ten obiekt i pobrała firstName i lastName w zasadzie
ja to tutaj drugi raz powiedziałem chciałbym Ci pokazać że rzeczywiście to działa w ten sposób, ok.
Czyli słowo kluczowe this tej funkcji zostało ustawione na ten obiekt a w przypadku person2 to powinna
być Katarzyna Nowak, ok, działa.
Czyli jak widzisz to słowo this potrafi się dostosowywać do warunków i w różnych miejscach znaczyć
coś innego.
Teraz na koniec chcecie pokazać jaki możemy z nim mieć problem.
To jest jeden z tych problemów że słowo kluczowe może kierować na obiekt globalny.
I co się z tym stanie kiedy połączymy to z programowaniem obiektowym, które już ci pokazywałem. Utworzmy sobie nową
klasę Shape i ja ją teraz tutaj wpisze, OK.
Jeżeli robisz ten kurs od początku to pamiętasz że taką klasę rzeczywiście mieliśmy my to nazwaliśmy
klasą bo pamiętaj że w JavaScript nie ma takich prawdziwych klas to jest konstruktor i chcę żeby przywołanie
do nowego obiektu przekazać mu tablicę z długością boku figury i przypisać ją do this.
No i teraz co się stanie jeżeli stworzymy nowy obiekt nazwiemy go shape powiedzmy w ten sposób new shape i przekażemy
mu tutaj tablicę z długością boków.
Może to być w ten sposób tak jak mieliśmy to w naszym przykładzie.
Ok.
Odwołajmy się do shepe.
Nie ma problemu sideLengths i tutaj jest array natomiast co stanie się jeżeli nie użyjemy słowa kluczowego new.
Ktoś zapomniał o tym słowie wykorzystując jakąś naszą bibliotekę to wtedy taką funkcję wywołamy.
Tak zwyczajnie.
A mówiłem ci już o takiej funkcji this to będzie obiekt globalny Window.
Sprawdźmy co się stanie wywołało się to po odświeżeniu i odwołajmy się do shape źle wpisałem shape ma wartość
undefined.
No bo odwołaliśmy tutaj funkcję która nie ma return nic nie zwraca czyli zwraca undefined i to undefined zostało
tu przypisane ale chwila my do tej funkcji przekazaliśmy tablicę co się z nią stało.
Ona przeszła tutaj i została przypisana do this a this to jest Window czyli window side lengths stworzyliśmy taką
globalną zmienną zobacz jeśli teraz wpiszę side lengths to mamy tutaj naszą tablicę i podobnie będzie pod
window side lengths
Czyli nie to czego byśmy oczekiwali i teraz na koniec pokażę ci rozwiązanie tego problemu czyli co zrobić
w naszej klasie
Jeżeli ktoś użyje jej bez new pokazywałem też pierwszej części tego kursu że niektóre wbudowane obiekty
skryptu zachowują się tak samo czy wpiszemy new czy nie piszemy i my możemy również to zrobić.
Otóż jeżeli użyjemy new to być może już wiesz że tutaj wewnątrz this będzie kierować nowo utworzony obiekt.
Czyli możemy sprawdzić if this instance of czyli jeżeli nowo utworzony obiekt jest instancji shape to
wszystko w porządku.
Jeżeli nie będzie użyte New to this będzie kierować na window. Window instance of
shape zwróci nam false czyli jeżeli zróbmy sobie tutaj może not w ten sposób pogrupujemy to.
Jeżeli window instance of shape tutaj będzie falls odwrócimy to będzie to chcemy zwrócić
new shape i przekazać tam side lengths
Zaraz ci powiem dlaczego.
W przeciwnym wypadku zrobimy to tak jak to już było i będzie OK.
Bo jeżeli tutaj zrobimy return funkcja się zatrzyma zatrzyma więc tutaj nie dojdziemy sprawdźmy tylko
czy to działa.
Odwołujemy się do shape i okazuje się że teraz jest ok a w globalnym zakresie nie ma takiej zmiennej
jak side lengths
Jeszcze raz chcę Ci tylko pokazać o co chodzi w przypadku programowania obiektywnego nie powiedziałem
o jednej ważnej rzeczy.
Mówiłem ci że jeżeli stworzymy sobie nowy konstruktor czyli funkcję shape to z niej nie musimy nic wracać
jeżeli użyjemy jej z New to ona zwróci nam nowo utworzony obiekt.
Natomiast z takiej funkcji możemy zwrócić.
Z tym że jeśli zwrócimy cokolwiek innego niż obiekt czyli np. return false albo return jakiś string
to zostanie to zignorowane i zostanie przypisane do zmiennej to co normalnie zrobiłaby ta funkcja.
Ale jeżeli zwrócimy obiekt jakikolwiek to wtedy ten obiekt zostanie użyty.
Dzięki temu nam to teraz działa bo sprawdziliśmy tutaj.
Jeżeli this nie jest instancją klasy shape tej którą tutaj zdefiniowaliśmy czyli będzie to window a więc
nie użyliśmy new to chcemy z tej funkcji zwrócić
tym razem już używając new shape i podać mu jeszcze raz ten parametr którą tutaj przekazaliśmy
więc to co tutaj zwracamy zostanie zapisane właśnie w zmiennej shape
Mam nadzieję że to załapałeś a więc takie jest obejście problemu.
I teraz nieważne czy użyjemy new czy nie.
Jeżeli napiszemy new to ten kod się nie wykona i przypiszemy sobie side lengths bez żadnego problemu i to zostanie automatycznie
zwrócone.
Jeżeli nie użyjemy new ten kod się wykona czyli zwróci new shape a więc jakby jeszcze raz wejdziemy w tą funkcję ale
this już będzie
poprzez new instance of shape czyli wykona się tylko to czyli jakby po prostu drugi raz ta funkcja będzie
musiała być wykonana.