Wejdziemy teraz w szczegóły słowa kluczowego "this", które w języku JavaScript może być dla wielu prawdziwą zmorą. A to dlatego, że...nie, nie. Wejdźcie do środka i tam dowiecie się wszystkiego :).
| Tweet |
"THIS" W JĘZYKU JAVASCRIPT WCALE NIE JEST TAKIE OCZYWISTE...
Spokojnie. Prześledźmy najpierw fakty. Słowo "this" jest to droga do uzyskania odniesienia do obiektu. W JavaScript często występuje potrzeba skonkretyzować swoje intencje, aby zmodyfikować lub wywołać coś z odpowiedniego obiektu. I właśnie "ten" temu służy. Chodzi o przedostanie się do konkretnej właściwości lub metody obiektu domniemanego przez język. Sęk w tym, że...obiekt kryjący się pod "this" może przeistaczać się w zależności od sytuacji!
WYJAŚNIENIE "PSA POGRZEBANEGO"
Już wyjaśniam poprzednie zdanie. Wywołajmy "this" na zewnątrz czegokolwiek:
console.log(this);Domyślnie, "this" w języku JavaScript będzie odniesieniem do obiektu "Window". "Window" to jest taki "obiekt matka", który przechowuje wszystkie składowe zdefiniowane w kodzie na zewnątrz (to się nazywa "kod głównego poziomu") + parę własnych określonych przez standard języka. Kiedy zastosujecie to samo słowo wewnątrz funkcji:
function doSomething() {
console.log(this);
}też OK, będzie ten sam efekt. ALE! Osadzenie wewnątrz obiektu zmieni już zasady gry!
const o = {
doSomething: function() {
console.log(this);
}
};i teraz tym "this" w języku JavaScript stanie się obiekt macierzysty, czyli "o"!!!
TEN MOMENT, KIEDY SPRAWA SIĘ KOMPLIKUJE
To jeszcze jest pikuś. Bywają sytuacje, że język JavaScript potrafi naprawdę pokrzyżować plany idąc tokiem rozumowania innym niż nasz. Przypuśćmy, że znajdujemy się w takiej sytuacji. Mamy jeden obiekt wewnątrz drugiego i chcemy za pomocą tego drugiego, zmodyfikować wartość właściwości "x" tego pierwszego:
const o = {
x: 59,
doSomething: function() {
const internal = {
changeValue: function() {
this.x = 503;
}
};
internal.changeValue();
console.log(this.x);
}
};
o.doSomething();Nie dojdzie do prawidłowej modyfikacji! A to dlatego, gdyż to "this" to nie jest odniesienie do obiektu "o", tylko tym razem chodzi mu o "internal". Jeśli chcemy poprawić kod, musimy przechować referencję do "o" krok wcześniej, zanim dojdzie się do obiektu "internal":
const refToO = this;
const internal = {
changeValue: function() {
refToO.x = 503;
}
};
internal.changeValue();
console.log(this.x);Teraz będzie OK.
 |
Słowo kluczowe "this" to odniesienie do obiektu domniemanego przez język. Domyślnie to zawsze jest "Window", a powoływanie się w obiekcie spowoduje "wskazywanie" na dany obiekt!
Podałem śmieszny przykład, natomiast przy bardziej skomplikowanych zagnieżdżeniach, "this" w języku JavaScript potrafi naprawdę sprawić ból psychicznie. W większości przypadków podana przeze mnie metoda przechowania referencji o krok wcześniej sprawdza się doskonale. Także orientujcie się czy "this" domniemane przez język i "this" domniemane przez Was, pokrywają się nawzajem.