Słowo kluczowe this w JavaScript

Zapraszam na kolejny post na temat “podstawowych podstaw” języka JavaScript. Tak jak w temacie, przedstawię dziś słowo kluczowe this w JavaScript. Oczywiście przypominam, że wpis ten należy do większego cyklu, dotyczącego moich przygotowań do egzaminu MCSD 70-480: Programming in HTML5 with JavaScript and CSS3 i moich notatek na ten temat.

Jak zwykle nie ma co przedłużać - przejdźmy do rzeczy!

Definicja

Jak najprościej opisać istotę słowa kluczowego “this”? Można powiedzieć, że jest to referencja do obiektu, który wywołał daną funkcję.

Oczywiście jest to pewne uproszczenie - słowa “this” można używać nie tylko w zakresie (scope) funkcji ale także w zakresie globalnym (jak wiemy z poprzedniego wpisu, w JavaScript mamy tylko te dwa zakresy). W dalszej części tego posta zajmiemy się różnymi przypadkami jego użycia w zakresie funkcji, ponieważ w zakresie globalnym “this” jest po prostu referencją do obiektu ‘window’ i mogą być w zasadzie stosowane zamiennie.

Zwykła funkcja

Paragraf ten rozpocznijmy od razu od przykładu. Spójrzmy na poniższy kod:

var obj = {}; // deklaracja obiektu
obj.someProperty = 'someValue';
obj.doSomething = function() {
  alert(this.someProperty); // odwołanie do właściwości wewnątrz obiektu
};

obj.doSomething(); // wywołanie metody

Powyżej mamy najbardziej standardowy przykład wykorzystania słowa kluczowego “this”. Najpierw mamy deklarację obiektu. Następnie definiujemy jego właściwość i metodę. W metodzie, aby odwołać się do właściwości tego samego obiektu, wykorzystujemy “this” (zupełnie jak w C#, czy innym “normalnym” języku programowania. Myślę, że nie ma tutaj czego więcej tłumaczyć ;)

Zwrócić za to należy uwagę na specyficzną cechę języka JavaScript - w języku tym, każda funkcja jest jednocześnie zmienną, którą można użyć wielokrotnie, również w kontekście innego obiektu. Spójrzmy na taki przykład:

var obj = {}; // deklaracja obiektu
obj.someProperty = 'someValue';
obj.doSomething = function() {
  alert(this.someProperty); // odwołanie do właściwości wewnątrz obiektu
};

var anotherObj = {}; // deklaracja innego obiektu
anotherObj.someProperty = 'anotherValue';
anotherObj.doSomething = obj.doSomething; // przypisanie funkcji do innego obiektu
anotherObj.doSomething();

W tym przypadku, w linii dziewiątej mamy do czynienia z przypisaniem funkcji jednego obiektu do właściwości innego obiektu. Następnie funkcja ta jest wywoływana na rzecz nowego obiektu - wyświetlona zostanie oczywiście wartość “anotherValue”. To dlatego, że słowo kluczowe “this” odnosi się po prostu do obiektu, który go wywołuje (gdyby w nowej klasie nie było zdefiniowanej właściwości ‘someProperty”, zwrócona zostałaby wartość ‘undefined’).

Funkcja jako konstruktor klasy

Jak pewnie wiadomo, funkcja może być również traktowana jako konstruktor klasy. Sprawdźmy to na przykładzie:

function SomeClass(someProperty) {
  this.someProperty = someProperty;
}

var someClassInstance = new SomeClass('someValue');
alert(someCalssInstance.someProperty);

Powyżej widzimy najpierw deklarację funkcji ‘SomeClass’ - w jej wnętrzu przypisujemy do właściwości ‘someProperty’ (jako, że użyto “this”, w domyśle przypisujemy w ten sposób wartość do klasy, która wywoła naszą funkcję) wartość przekazaną jako parametr wejściowy.

Później, w linii piątej widzimy użycie słowa “new” w kontekscie funkcji “SomeClass” - w ten sposób funkcja ta została potraktowana jako konstruktor instancji obiektu (w przykładzie ‘someClassInstance’) nie zdefiniowanej wprost klasy.

Ostatnia linia służy pokazaniu, że instancja utworzona przez funkcję, rzeczywiście zawiera odpowiednią wartość).

Odwołania do elementów DOM

W funkcjach obsługujących zdarzenia elementów DOM, za pomocą słowa kluczowego “this”, mamy możliwość dostępu do właściwości tychże obiektów. Możemy zobaczyć to na prostym przykładzie:

var divElement = document.getElementById('someDivId');

divElement.onclick = function () {
  alert(this.innerHTML);
};

To pokazuje, że “this” w tym przypadku, odnosi się do elementu, w kontekście którego nastąpiło obsługiwane zdarzenie.