JavaScript: Globalny obiekt window

0:00W tej lekcji powiemy sobie o globalnym obiekcie

0:03w języku JavaScript, którym w przypadku przeglądarki jest obiekt window.

0:07Jak już wspominałem wcześniej, jeżeli chodzi o środowisko, w którym język

0:11JavaScript jest uruchamiany, to ono może być różne.

0:13Może to być np. Node.js, albo może to być środowisko

0:16przeglądarki internetowej, w którym jesteśmy teraz.

0:19Niemniej jednak sama specyfikacja języka JavaScript mówi o tym, że zawsze jest tam

0:24pewnego rodzaju globalny obiekt, tak jakby najwyższy w hierarchii obiekt, na którym

0:29mogą znajdować się pewne inne obiekty czy dostępne informacje.

0:34I jeżeli chodzi o Node.js, to ten obiekt

0:36nazywa się Global i mamy po prostu jakby taką zmienną, która się tak nazywa

0:41a w przypadku przeglądarki internetowej ten obiekt nazywa się window.

0:45Więc jeżeli teraz od razu w konsoli

0:47wpiszę sobie window, zauważ, że to nam zwraca odwołanie do

0:50jakiegoś obiektu, w którym jest masa rzeczy.

0:53I teraz te rzeczy mogą się różnić w

0:55różnych przeglądarkach internetowych, dlatego, że one nie są tutaj jakby z samej

1:00specyfikacji języka JavaScript stworzone, tylko z tego, co oferuje przeglądarka.

1:05Niemniej jednak chodzi o to, że jest jakiś obiekt dostępny pod taką jakby zmienną o

1:09nazwie window i na nim mamy różne właściwości i metody.

1:14Co oznacza to, że jest to obiekt globalny?

1:16Otóż, że jest to jakby najwyższy w hierarchii

1:18obiekt i będzie on dostępny po prostu wszędzie.

1:21Jeżeli przejdziemy sobie do naszego skryptu, nigdzie nie otworzyliśmy tutaj jak widzisz ani

1:25stałej, ani żadnej zmiennej o nazwie window, a mimo tego mamy dostęp do takiego

1:30obiektu window i na nim możemy do różnych rzeczy się odwoływać.

1:34Co jeszcze jest bardzo ważne, jeżeli sobie

1:35utworzymy jakąś funkcję w globalnym zakresie,

1:39czyli jesteśmy teraz w pliku main.js,

1:41który jest podpięty do strony i nie będziemy tego oplatać żadną funkcją, która nam

1:46ograniczy zakres, to jeżeli utworzę jakąś funkcję, nazwalibyśmy ją np.

1:50myFn.

1:51Ona nie musi nic robić.

1:52Jeżeli to zapiszę, to taka funkcja czytaj

1:56nazwa automatycznie staje się właściwością obiektu globalnego.

2:00Czyli jeżeli teraz bym się tutaj odwołał do myFn, wiadomo, że ona tutaj będzie,

2:04ale jeśli się odwołam do window.myFn

2:06zauważ, że taka właściwość na obiekcie window się znalazła

2:09mimo tego, że ja nigdzie nie napisałem,

2:12że chcę do window.myFn przypisać odwołanie do właśnie tej funkcji.

2:16Więc warto o tym wiedzieć.

2:18I podobnie jest, gdybyśmy w starym zapisie z użyciem var tworzyli jakieś zmienne.

2:22Gdybym napisał sobie tutaj np.

2:23firstName, przypisał tutaj jakąkolwiek

2:25wartość, to też stałoby się to właściwością obiektu window.

2:29Natomiast jeżeli utworzymy zmienną lub

2:32stałą z użyciem let lub const, to ona owszem zobacz będzie dostępna globalnie, bo nie

2:38ograniczyliśmy tutaj tego zakresu, więc firstName jest dostępne, ale nie jest

2:41wtedy dostępne na window, czyli nie staje się właściwością tego oto obiektu.

2:47Natomiast w przypadku funkcji tak jest, ale

2:49zazwyczaj ten nasz kod będzie w jakiś sposób w modułach

2:52też pakowany tak, że nie będzie po prostu takich globalnych funkcji.

2:56Niemniej jednak warto o tym wiedzieć.

2:58Co zatem kryje się za tym obiektem window w przeglądarkach?

3:01Co na nim możemy ciekawego znaleźć?

3:04Na nim mamy różne inne obiekty, do których można się jednak odwoływać bezpośrednio.

3:08Na przykład coś takiego jak document, z czego będziemy jeszcze korzystać, czy np.

3:12location. Można z tego skorzystać bezpośrednio,

3:16ale można również z tego skorzystać, co ja często czynię poprzez window.location.

3:20Jest to dla mnie bardziej czytelne, czy np.

3:23window.localStorage. To jest takie API, które pozwala nam przechowywać jakieś dane

3:27tekstowe w przeglądarce pomiędzy przeładowywaniami stron.

3:30Jest to dostępne również bez tego window,

3:33bo jeżeli coś jest właściwością obiektu window, to jest automatycznie dostępne

3:37wszędzie właśnie bez poprzedzenia tego przez window,

3:40no ale właśnie na tym obiekcie window bardzo wiele rzeczy się znajduje

3:43i jeżeli go sobie tutaj wyświetlimy, to wszystkie z nich mógłbyś tutaj znaleźć.

3:47Niemniej jednak niech to Cię nie

3:48przytłoczy, bo nie są to rzeczy ani które trzeba znać na pamięć, ani które mają

3:53jakieś wielkie znaczenie w większości przypadków.

3:56Innymi słowy są to rzeczy, po które z czasem będziesz sięgał.

4:00Będziemy również w tym kursie część z nich omawiać,

4:02no i warto wiedzieć, że one jeżeli są

4:03globalne, to znaczy, że są właściwością na obiekcie window.

4:07Skoro ten obiekt window jest globalny, to

4:09można go jeszcze w ciekawy sposób wykorzystać.

4:12Jeżeli sobie przejdziemy tutaj do index.

4:14html to pokażę Ci, że możemy sobie tutaj wstawić taki skrypt liniowy, który będzie tak

4:19wyglądał i do obiektu window przypisać sobie jakąś własną właściwość.

4:24To jest coś, co ja bardzo często czynię,

4:26jeżeli chcę tutaj w tym miejscu zdefiniować pewne dane, do których będę

4:30miał dostęp ze wszystkich podłączonych niżej skryptów.

4:33Więc możemy np. napisać window.USER

4:35ja sobie lubię to tak wielkimi literami

4:37zapisać i przypisać sobie tutaj taki oto obiekt, którym zapisze jakieś dane np.

4:42name miałbym tutaj Jan i powiedzmy email mielibyśmy jan@example.com.

4:49Teraz o co chodzi?

4:50Tych danych raczej bym tutaj nie wpisywał ręcznie, tylko one byłyby tutaj wstawione

4:55poprzez jakiś dynamiczny język back-endowy.

4:57Na przykład gdyby ten plik index.

4:58html był plikiem php

5:00w języku php. Byłby to index.php

5:02po prostu, to mógłbym tutaj wczytując ten

5:05szablon wyciągnąć jakieś dane z bazy danych np.

5:08o aktualnie zalogowanym użytkowniku i tutaj sobie je wstawić.

5:12Jeżeli miałeś do czynienia z językiem PHP

5:14to być może wiesz, że moglibyśmy wtedy tutaj zrobić coś takiego php echo i np.

5:19mielibyśmy coś takiego jak user name.

5:21Mogłoby to tak wyglądać

5:23i to by oznaczało, że kiedy ta strona na

5:24serwerze jest renderowana to tutaj po prostu zostanie wstawione np.

5:28Jan. I kiedy coś takiego trafi do przeglądarki

5:31czyli taki kod to w każdym skrypcie, który podpieliśmy poniżej będziemy mieli dostęp

5:35właśnie do takiej globalnej zmiennej user i będziemy sobie mogli te rzeczy odczytać.

5:41Czyli teraz jak przejdziemy do main to po

5:43pierwsze mógłbym się tutaj odwołać po prostu do user tak globalnie

5:47i wtedy mielibyśmy tam name albo co ja

5:50zazwyczaj czynię odwołuję się poprzez window.

5:52Jest to dla mnie jakby znakiem, że to jest przypisane do obiektu globalnego.

5:56Czyli moglibyśmy zrobić console.log window.USER i np.

6:01name. Zobaczmy.

6:02Oczywiście wyświetli nam się Jan. Więc ten globalny obiekt może być wykorzystywany do

6:06tego, żeby właśnie coś było przypisane globalnie i dostępne wszędzie.

6:10No i może to też działać w drugą stronę.

6:12To znaczy z Twoich skryptów mógłbyś sobie tutaj utworzyć jakąś funkcję,

6:16ona by mogła być w jakiś modułach, jeszcze zawarta itd.

6:19i powiedzmy tak jak wcześniej pokazałem, byłaby to jakaś funkcja myFn i w dowolnym

6:23momencie mógłbyś ją przypisać do window albo pod taką samą nazwą myFn, albo pod inną

6:28nazwą i dzięki temu, że Ty ją w ten sposób przypiszesz do globalnego obiektu, to ona

6:33będzie dostępna we wszystkich innych skryptach, które by się znalazły poniżej

6:37tego skryptu, albo oczywiście w kodzie, który znajdzie się tutaj poniżej.

6:41Na koniec powiem Ci jeszcze, że tak jak

6:43wspomniałem na początku, w przypadku Node.js tam nie ma obiektu window, bo on jest

6:46specyficzny dla przeglądarki i na nim są tutaj różne rzeczy związane z

6:50przeglądarką, ale także przy okazji on jest obiektem globalnym,

6:53w przypadku Node.js mamy taką zmienną,

6:55która się nazywa global i ona się odwołuje do globalnego obiektu.

6:59Ale jakiś czas temu specyfikacja języka JavaScript wdrożyła coś takiego

7:04czy stworzyła taki zapis, aby w każdym środowisku, które wykonuje kod JavaScript

7:09była taka globalna zmienna, która się nazywa globalThis. I to globalThis

7:13jeżeli sobie porównamy tym operatorem Strict Equality Operator do Window

7:18zwróci nam true, a to oznacza, że globalThis jeśli z tego skorzystamy to jest

7:22dokładnie to samo co window, a w przypadku Node.js globalThis

7:26to będzie dokładnie to samo co stała global, o której wspomniałem.

7:30I teraz czy musisz z tego korzystać?

7:32Jak najbardziej nie i prawdopodobnie to Ci

7:34się nie przyda, ale to jest po to, żebyśmy mogli napisać kod JavaScript nie myśląc

7:38czy on będzie uruchamiany w przeglądarce czy np.

7:41w Node.js i wtedy się nie zastanawiamy czy

7:43korzystamy z Window czy z Global, tylko po prostu skorzystamy z globalThis i taki kod

7:48niezależnie gdzie będzie uruchomiony będzie działał tak samo.

7:51Oczywiście w takim kodzie nie moglibyśmy

7:52korzystać z rzeczy specyficznych dla środowiska przeglądarki internetowej czy

7:56specyficznych dla Node. Ale gdybyśmy tam wykorzystali tylko taki generyczny kod

8:00JavaScript, to tam możemy skorzystać właśnie z globalThis i

8:04będzie to wtedy działać i w jednym, i w drugim środowisku dokładnie tak samo.

8:08To zatem tyle, jeżeli chodzi o window.

8:09Oczywiście będziemy sięgać po wiele z

8:12rzeczy, które na tym obiekcie w przeglądarce są dostępne

8:14i już w kolejnej lekcji pokażę Ci jeszcze

8:17kilka obiektów, które są jeden poziom niżej, czyli właśnie są przypisane do

8:20window, które mogą się w wielu sytuacjach przydać.