Javascript spread operator.
21 grudnia, 2022W standardzie ES6 wprowadzono wiele zmian i unowocześnień do języka Javascript. Jednym z najważniejszych z nich jest tzw. spread operator....
Czytaj dalejSłowo this w języku angielskim, jest określeniem wskazującym określony obiekt. Tak samo jest w programowaniu. W obu przypadkach jego znaczenie zmienia się w zależności od kontekstu. Jeżeli masz w ręce jabłko to powiesz np. „this is red”, ale gdy będziesz trzymaj banana to powiesz „this is yellow”. Jak widać w zależności od okoliczności słowo this wskazuje inną rzecz.
Obiekt this odwołuje się do pewnego obiektu, w zależności od kontekstu wywołania. Ów kontekst zależy od miejsca w kodzie. Można powiedzieć, że niektóre elementy javascript’u tworzą konteksty. Załóżmy kilka scenariuszy.
Pierwszym z nich jest wywołanie this po prostu w skrypcie. Wówczas wskaże on na globalny obiekt Window, reprezentujący okno przeglądarki.
<script> document.write(this); </script>
Dla sprawdzenia odwołajmy się za pomocą this do jednej z metod obiektu window – metody prompt która służy do wyświetlania okna dialogowego użytkownikowi. Oto skrypt:
<script> this.prompt('Podaj wartość'); </script>
Teraz załóżmy inny scenariusz – wywołajmy this wewnątrz funkcji.
<script> function wyswietl() { document.write(this); } wyswietl(); </script>
Jak widać znowu this wskazuje na obiekt Window. Następnym krokiem będzie sprawdzenie jak zachowa się this wewnątrz obiektu.
<script> const obiekt = { wyswietl() { document.write(this); } } obiekt.wyswietl(); </script>
Tym razem uzyskaliśmy wynik [object Object]. Pojawia się on, gdy próbuje się wyświetlić obiekt jako tekst. Spróbujmy to obejść używając metody JSON.stringify(). Do tego dodam jeszcze jakiś parametr obiektu, niech to bedzie a =10;
<script> const obiekt = { a:10, wyswietl() { document.write( JSON.stringify(this)); } } obiekt.wyswietl(); </script>
Jak widać, this wskazuje tutaj na nasz obiekt. Oznacza to, że z jego pomocą możemy odwołać się do parametrów i metod danego obiektu. Jest to bardzo przydatne. Spróbujmy utworzyć funkcję która wyświetli wartość parametru a.
<script> const obiekt = { a:10, wyswietl() { document.write(this.a); } } obiekt.wyswietl(); </script>
Na koniec zastanówmy się, czy możemy zmienić przypisanie this. Np. mamy taką sytuację jak w kodzie poniżej. Ale zamiast wartości a obiektu2 zależy nam na poznaniu wartości a w obiekcie1. O dziwo możemy to zrobić. Posłuży nam do tego metoda call();. Spowoduje ona zmianę kontekstu wywołania funkcji.
<script> const obiekt1 = { a:10 } const obiekt2 = { a: 5, wyswietl() { document.write(this.a) } } obiekt2.wyswietl(); document.write('<br>'); //dodanie odstępu obiekt2.wyswietl.call(obiekt1) </script>
Nasuwa się jednak pytanie, co w sytuacji, gdy funkcja, którą wywołujemy ze zmienionym kontekstem, przyjmuje jakieś zewnętrzne argumenty? Wówczas zastosujemy metodę apply(), która obok nowego kontekstu przyjmie także tablicę argumentów. Implementacja wygląda tak:
<script> const obiekt1 = { a:10, } const obiekt2 = { a: 5, wyswietl(czyWyswietlic) { if(czyWyswietlic) document.write(this.a) } } obiekt2.wyswietl(true); document.write('<br>'); //dodanie odstępu obiekt2.wyswietl.apply(obiekt1,[true]) </script>
Na koniec chciałbem wspoDo zarządzania kontekstem funkcji wykorzystać możemy jeszcze jedną metodę. Jest nią bind(). Zwraca ona nową funkcję, która posiada już zmieniony kontekst. Oto przykład:
<script> function displayThis() { document.write(this); } const bindedDisplayThis = displayThis.bind(10) displayThis(); bindedDisplayThis(); </script>
Jak widać kontekst uległ zmianie z obiektu Window na argument metody bind(), czyli w tym wypadku liczbę 10.
W standardzie ES6 wprowadzono wiele zmian i unowocześnień do języka Javascript. Jednym z najważniejszych z nich jest tzw. spread operator....
Czytaj dalejW standardzie ES6 wprowadzono do języka Javascript nowe typy danych. Jednym z nich jest Set. Zasadniczo pełni on podobną funkcję...
Czytaj dalejJednym z najpowszechniejszych pytań rekrutacyjnych dla programisty Javascript jest wyjaśnienie, czym jest tzw. hoisting. Zagadnienie to jest ciekawie, głównie dlatego,...
Czytaj dalej