Sł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>Zmiana kontekstu
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.
