Frage 5
Welchen Output ergibt folgende Signatur JavaScript class A{ constructor() { this.foo = 'Lorem ipsum'; setTimeout(function() { console.log('1: ', this.foo); }, 100); setTimeout(() => { console.log('2: ', this.foo); }, 200); } } new A();
this hat in beiden Funktionen eine unterschiedliche Bedeutung. In der Funktion, die mit dem Schlüssel function erzeugt wird, bezieht sich this auf den äußersten Kontext. Bei einer arrow function (⇒ …) wird this automatisch an die Instanz zur Erzeugung gebunden.
Function 1
Der Kontext wird an das Window Objekt gebunden. Fragt man via this.constructor.name die Klasse des Objekts ab, erhält man Window. Entsprechend ist this.foo ⇒ undefined.
Function 2
Der Kontext wird an die Instanz der Klasse A gebunden. Fragt man via this.constructor.name die Klasse des Objekts ab, erhält man A. Entsprechend ist this.foo ⇒ Lorem ipsum..
Referenzen:
Arrow function expressions
How “this” binds in regular functions and arrow functions in JavaScript?