this w JavaScript: zasady wiązania i typowe pułapki

O this decyduje moment wywołania

Większość zamieszania wokół this bierze się z jednego błędnego założenia: że this zależy od tego, gdzie funkcję zdefiniowano. Nie zależy. this zależy od tego, jak funkcję wywołano.

Spójrz na tę samą funkcję wywołaną na dwa sposoby:

function whoAmI() {
    return this;
}

const user = { name: "Ada", whoAmI };

console.log(user.whoAmI() === user);   // true
console.log(whoAmI());                  // undefined (in strict mode)

Ta sama funkcja, różne this. Pierwsze wywołanie ma user przed kropką, więc this to user. Drugie nie ma niczego przed kropką, więc this to undefined. Sama funkcja się nie zmieniła, zmieniło się miejsce wywołania.

Zapamiętaj tę myśl: żeby ustalić this, patrz na wywołanie, a nie na definicję.

Cztery zasady wiązania

this może zostać ustawione na cztery sposoby. Prawie każde pytanie o this rozwiążesz, ustalając, która zasada ma zastosowanie.

1. Wywołanie metody: obj.fn()

Gdy funkcję wywołujesz jako właściwość obiektu, this to ten obiekt:

const counter = {
    count: 0,
    increment() {
        this.count += 1;
        return this.count;
    },
};

console.log(counter.increment());   // 1
console.log(counter.increment());   // 2

To, co stoi przed kropką, staje się this. Tylko tyle.

2. Zwykłe wywołanie: fn()

Przy wywołaniu bez obiektu z przodu this to undefined w trybie ścisłym (który moduły i klasy włączają automatycznie) albo obiekt globalny w trybie nieścisłym:

"use strict";

function show() {
    console.log(this);
}

show();   // undefined

Stąd biorą się błędy „this is undefined”. Oderwanie metody od obiektu zamienia wywołanie metody w zwykłe wywołanie:

"use strict";

const counter = {
    count: 0,
    increment() { this.count += 1; },
};

const fn = counter.increment;
// fn();   // TypeError: Cannot read properties of undefined

Brak counter. przed wywołaniem oznacza brak wiązania. Funkcja nie pamięta obiektu, z którego pochodzi.

3. Jawne wiązanie: .call(), .apply(), .bind()

Możesz wymusić dowolne this:

function greet(greeting) {
    return `${greeting}, ${this.name}`;
}

const ada = { name: "Ada" };

console.log(greet.call(ada, "Hello"));       // Hello, Ada
console.log(greet.apply(ada, ["Hi"]));       // Hi, Ada

const greetAda = greet.bind(ada);
console.log(greetAda("Hey"));                // Hey, Ada

.call i .apply od razu wywołują funkcję, a różnią się tylko sposobem przekazywania argumentów. .bind zwraca nową funkcję z na stałe zablokowanym this, co przydaje się przy callbackach.

4. Wywołanie z new: new Fn()

Wywołanie funkcji z new tworzy nowy obiekt i wiąże go z this:

function User(name) {
    this.name = name;
}

const ada = new User("Ada");
console.log(ada.name);   // Ada

Klasy używają tego mechanizmu pod spodem. Poznasz je w jednym z kolejnych rozdziałów.

Funkcje strzałkowe nie mają własnego this

Funkcje strzałkowe celowo łamią powyższe zasady. W ogóle nie wiążą this, tylko dziedziczą je z otaczającego zakresu, zamrożone w chwili definicji strzałki:

const user = {
    name: "Ada",
    regular: function () { return this; },
    arrow: () => this,
};

console.log(user.regular() === user);   // true
console.log(user.arrow());              // undefined (or window/globalThis)

Strzałka na najwyższym poziomie modułu przechwytuje this modułu, czyli undefined. Choć wywołujesz ją jako user.arrow(), strzałka nie daje się ponownie związać.

Wygląda to na błąd, ale właśnie o to chodzi. Funkcje strzałkowe błyszczą wewnątrz metod, gdzie chcesz zachować zewnętrzne this:

const timer = {
    seconds: 0,
    start() {
        setInterval(() => {
            this.seconds += 1;
            console.log(this.seconds);
        }, 1000);
    },
};

// timer.start();   // logs 1, 2, 3, ...

Strzałka wewnątrz setInterval dziedziczy this z start, które wywołano jako timer.start(). Dlatego this.seconds działa. Zwykła function w tym miejscu dostałaby własne this (cokolwiek przekaże setInterval) i wszystko by się zepsuło.

Praktyczna zasada: funkcji strzałkowych używaj do callbacków wewnątrz metod, a zwykłych funkcji do samych metod.

Klasyczna pułapka z callbackiem

To najczęstszy sposób, w jaki this się rozjeżdża. Przekazujesz metodę jako callback, a ona gubi wiązanie:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();
c.increment();   // 1

// setTimeout(c.increment, 100);   // TypeError: this is undefined

setTimeout wywołuje funkcję zwykłym wywołaniem, a nie jako c.increment(). Są trzy sposoby, żeby to naprawić:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();

// 1. Arrow wrapper - call it as a method inside the arrow
setTimeout(() => c.increment(), 0);

// 2. .bind - lock this to c
setTimeout(c.increment.bind(c), 0);

// 3. Class field with arrow - auto-bound per instance
class Counter2 {
    count = 0;
    increment = () => {
        this.count += 1;
        console.log(this.count);
    };
}
setTimeout(new Counter2().increment, 0);

Wszystkie trzy działają. Opakowanie w strzałkę jest zwykle najczytelniejsze.

this na najwyższym poziomie

this na najwyższym poziomie zależy od tego, gdzie działa twój kod:

• Skrypt w przeglądarce (nie moduł): this to window.
• Moduł ES (w tym większość nowoczesnego kodu z bundlera): this to undefined.
• Moduł CommonJS w Node.js: this to module.exports.

Do niezawodnego odwołania do obiektu globalnego w każdym środowisku używaj globalThis:

console.log(typeof globalThis);   // object
globalThis.appVersion = "1.0.0";
console.log(globalThis.appVersion);

W praktyce nie warto polegać na this na najwyższym poziomie. Sięgaj po globalThis, gdy naprawdę potrzebujesz obiektu globalnego, a w pozostałych przypadkach przekazuj wartości jawnie.

Szybkie drzewo decyzyjne

Gdy widzisz this i nie wiesz, czym będzie, przejdź przez tę listę:

1. Czy to funkcja strzałkowa? Wtedy this jest takie jak w otaczającym zakresie. Miejsce wywołania nie ma znaczenia.
2. Czy wywołano ją z new? Wtedy this to nowy obiekt.
3. Czy wywołano ją przez .call, .apply albo jako funkcję związaną? Wtedy this to przekazana wartość.
4. Czy wywołano ją jako obj.method()? Wtedy this to obj.
5. Czy wywołano ją jako zwykłe fn()? Wtedy this to undefined w trybie ścisłym.

Ta drabinka, w tej kolejności, rozstrzyga każdy przypadek.

Dalej: funkcje wyższego rzędu

Skoro this nie jest już zagadką, możesz przejść do wzorca, który czyni JavaScript tak ekspresyjnym: przekazywania funkcji jako wartości. Następnie przyjrzysz się funkcjom wyższego rzędu, czyli funkcjom przyjmującym lub zwracającym inne funkcje, oraz temu, jak napędzają metody tablic, obsługę zdarzeń i większość prawdziwego kodu JavaScript.