W JavaScript, słowo kluczowe `this` odnosi się do kontekstu, w którym funkcja jest wywoływana. W przypadku wywołań zwrotnych (callbacks), `this` może nie wskazywać na oczekiwany kontekst, zwłaszcza wewnątrz funkcji, które są wywoływane asynchronicznie lub są przekazywane jako argumenty do innych funkcji. Istnieje kilka sposobów, aby upewnić się, że `this` wewnątrz wywołania zwrotnego odnosi się do odpowiedniego kontekstu:
Bind
Możesz użyć metody `.bind()`, aby jawnie ustawić wartość `this` dla wywołania zwrotnego.
function callback() {
// Użyj 'this' tutaj
}
const boundCallback = callback.bind(thisContext);
Metoda `.bind()` tworzy nową funkcję z tym samym ciałem i zakresem co oryginalna funkcja, ale z `this` trwale ustawionym na pierwszy argument `.bind()`.
Zmienna
Często stosowanym rozwiązaniem jest przypisanie `this` do zmiennej (często nazywanej `that` lub `self`) w zakresie zewnętrznym, a następnie odwołanie się do tej zmiennej wewnątrz wywołania zwrotnego.
const self = this;
function callback() {
// Użyj 'self' zamiast 'this'
}
Ponieważ zmienne są dostępne w zamykaniach (closures), `self` będzie miała właściwą wartość wewnątrz wywołania zwrotnego.
Arrow Functions
Funkcje strzałkowe (`arrow functions`) nie mają własnego `this`, zamiast tego dziedziczą `this` z otaczającego zakresu leksykalnego.
const callback = () => {
// Tutaj 'this' odnosi się do 'this' z zakresu zewnętrznego
};
Użycie funkcji strzałkowej jest najczęściej zalecanym sposobem, gdyż jest to rozwiązanie czyste i nie wymaga dodatkowych deklaracji czy wiązania.
Apply i Call
Można również użyć metod `.apply()` lub `.call()`, które pozwalają wywołać funkcję z jawnie określonym `this`.
function callback() {
// Użyj 'this' tutaj
}
callback.call(thisContext);
// lub
callback.apply(thisContext);
Metody `.call()` i `.apply()` różnią się tym, że `.call()` przyjmuje argumenty indywidualnie, a `.apply()` jako tablicę.
W Kontekście Konstruktora
Jeśli pracujesz z konstruktorem lub klasą, możesz zdefiniować metody jako arrow functions, aby mieć pewność, że `this` będzie zawsze wskazywać na instancję klasy.
class Example {
constructor() {
this.value = 123;
}
method = () => {
// 'this' zawsze wskazuje na instancję klasy
};
}
Wybór odpowiedniej metody zależy od konkretnego przypadku użycia i własnych preferencji. Funkcje strzałkowe są zwykle najczystszym i najłatwiejszym sposobem na zarządzanie `this` w wywołaniach zwrotnych, ale inne metody mogą być bardziej odpowiednie w zależności od kontekstu, w jakim pracujesz.
Komentarz