Źródło: Arkusze CKE

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();

Warianty odpowiedzi

A
TypeError
B
Hello, null
C
Hello, John
D
Hello, undefined

Wyjaśnienie

To tradycyjna pułapka związana z zachowaniem słowa kluczowego this w zwykłych funkcjach w JavaScript.

Funkcja przekazana do setTimeout wykonywana jest po upływie czasu jako osobne wywołanie. Zwykła funkcja ustalana w ten sposób traci kontekst obiektu obj i jej this zaczyna wskazywać na obiekt globalny (np. window w przeglądarce).

W obiekcie globalnym właściwość name nie istnieje, więc wyrażenie this.name zwraca undefined. Na konsoli pojawi się tekst Hello, undefined.

Gdyby wewnątrz setTimeout użyto funkcji strzałkowej (() => {}), zachowałaby ona prawidłowy kontekst this z obiektu obj i kod wypisałby Hello, John.

Sprawdź się w praktyce

Rozwiąż pełny test próbny INF.04 albo wylosuj pojedyncze pytanie na szybką powtórkę.

Test próbny INF.04 Jedno pytanie Własny test

Podobne pytania — OOP - Podstawy

Wszystkie pytania INF.04

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();

Warianty odpowiedzi

Wyjaśnienie

Sprawdź się w praktyce

Podobne pytania — OOP - Podstawy

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();