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ź do środka i tam dowiesz się wszystkiego 🙂.
"THIS" W JĘZYKU JAVASCRIPT WCALE NIE JEST TAKIE OCZYWISTE...
Prześledźmy najpierw fakty. Słowo "this" to droga do uzyskania odniesienia do obiektu. W języku 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 zmieniać się w zależności od sytuacji 🤯!
PRZYKŁAD KODU ŹRÓDŁOWEGO
Na dobry początek, 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 (nazywamy to "kodem głównego poziomu") + parę własnych składowych określonych przez standard języka.
Kiedy zastosujesz to samo słowo wewnątrz funkcji:
function doSomething() {
console.log(this);
}też OK, będzie ten sam efekt. NATOMIAST! Osadzenie wewnątrz obiektu zmieni już zasady gry! Kiedy uruchomisz ten kod:
const object = {
doSomething: function() {
console.log(this);
}
};
object.doSomething();tym "this" w języku JavaScript stanie się obiekt, w którym doszło do odwołania się do tego, czyli "object" 🚨!!!
TEN MOMENT, KIEDY SPRAWA SIĘ KOMPLIKUJE
Bywają sytuacje, w których język JavaScript potrafi naprawdę pokrzyżować plany idąc tokiem rozumowania innym niż nasz. Przypuśćmy, że znajdujemy się w takiej sytuacji. Mamy obiekt A, który posiada właściwość "x" w postaci liczby i metodę, w której znajduje się drugi, lokalny obiekt B. Wywołując metodę z obiektu A, chcemy za pomocą obiektu lokalnego B, zmodyfikować wartość właściwości obiektu A ("x").
Przekładając to na kod, uzyskujemy taką strukturę 👇:
const objectA = {
x: 50,
changeValue: function() {
const objectB = {
changeValue: function() {
this.x = 500;
}
};
objectB.changeValue();
console.log(this.x);
}
};
objectA.changeValue();Nie dojdzie do prawidłowej modyfikacji ❌! A to dlatego, gdyż to "this", to nie jest odniesienie do obiektu A, tylko wskazuje na obiekt B.
Jeżeli chcemy, żeby zadziałało po naszej myśli, musimy przechować referencję do obiektu A "krok wcześniej", zanim kod dojdzie do obiektu B:
const objectA = {
x: 50,
changeValue: function() {
const refToObjectA = this;
const objectB = {
changeValue: function() {
refToObjectA.x = 500;
}
};
objectB.changeValue();
console.log(this.x);
}
};
objectA.changeValue();Teraz będzie prawidłowo ✅! Podałem mały przykład, natomiast przy bardziej skomplikowanych zagnieżdżeniach, "this" w języku JavaScript potrafi naprawdę dokopać psychicznie 🚀. W większości przypadków podana przeze mnie metoda przechowywania referencji o krok wcześniej, będzie skuteczna w 100% 💯. Także orientuj się czy "this" domniemane przez język i "this" domniemane przez Ciebie, pokrywają się nawzajem ⚠️.
 |
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!
Wszystko na ten temat 🏁!