Javascript słowo kluczowe this.

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.

Sebastian Nosal

Ostatnio zaktualizowane: 21 grudnia 2022

Egzamin EE.09, Egzamin INF.03, JavaScript