Co będzie wynikiem działania poniższego kodu JavaScript? const obj = {
name: 'John',
greet: function() {
setTimeout(function() {
console.log(`Hello, ${this.name}`);
}, 1000);
}
};
obj.greet();
Wynik działania tego kodu to `Hello, undefined`, co jest spowodowane tym, jak działa kontekst `this` w JavaScript. Gdy wywołujemy metodę `greet`, w kontekście tej metody `this` odnosi się do obiektu `obj`. Proszę zauważyć, że metoda `greet` używa funkcji anonimowej w `setTimeout`, a to zmienia kontekst `this`. W momencie, gdy `setTimeout` wywołuje funkcję, `this` nie odnosi się już do obiektu `obj`, lecz do globalnego obiektu (w przeglądarkach jest to `window`), gdzie `name` nie jest zdefiniowane. Dlatego w konsoli widzimy `Hello, undefined`. Takie zachowanie jest typowe dla JavaScript, więc warto zrozumieć, jak można to zmienić, np. używając funkcji strzałkowej (`() => {}`), która nie ma własnego kontekstu `this`, więc po prostu korzysta z kontekstu otaczającego. Użycie strzałek w takich przypadkach jest coraz częściej zalecane w nowoczesnym kodzie.
Odpowiedzi `Hello, John`, `TypeError` oraz `Hello, null` są wynikiem niepełnego zrozumienia zasad działania kontekstu `this` w JavaScript oraz mechanizmów związanych z wywołaniami funkcji w różnych kontekstach. W przypadku pierwszej z tych odpowiedzi, można by sądzić, że `this` w funkcji anonimowej odwołuje się do obiektu `obj`, co jest błędne, ponieważ w momencie wywołania funkcji przez `setTimeout` kontekst `this` traci odniesienie do obiektu, a zamiast tego wskazuje na obiekt globalny. W efekcie `this.name` nie zwraca wartości `'John'`, lecz `undefined`. Druga odpowiedź, związana z `TypeError`, nie zrozumiała, że żadne błędy nie są generowane w tym kodzie, a funkcja anonimowa wykonuje się bezproblemowo, jednak z błędnym kontekstem. Ostatnia propozycja, `Hello, null`, również jest nietrafiona, ponieważ nie istnieje sytuacja, w której `this` w tym kontekście mogłoby się odwoływać do `null`. Należy również pamiętać, że JavaScript różni się od wielu innych języków programowania, gdzie `this` jest bardziej ściśle powiązane z obiektem, w którym metoda została wywołana. Zrozumienie kontekstu `this` jest kluczowe w pracy z JavaScript, szczególnie w pracy z funkcjami asynchronicznymi oraz w zastosowaniach programowania obiektowego.