dedlfix: Referenz im Objektliteral

Beitrag lesen

Tach!

Wenn dein A-Problem ist, möglichst wenig Code an der Stelle stehen zu haben,

Hintergrund war, dass im Objektliteral noch eine Methode ist, die sich auf array2 bezieht, und ich dachte, dass array2 dafür vorher im Objektliteral auftauchen müsste.

Das muss es nur bei kompilierenden Sprachen, die den Code komplett in Maschinencode (oder Zwischencode) übersetzen und deshalb wissen müssen, worauf sich was bezieht.

Muss es gar nicht; funzt:

let myObject = {
	array1: [1, 2, 3],

	foo: () => { console.log(myObject.array2); }
};

myObject.array2 = myObject.array1.map(x => x + 1);

myObject.foo(); // Array [ 2, 3, 4 ]

Javascript ist aber (unabhängig von irgendwelchen Just-In-Time-Compileren, die quasi ein halbherziges Kompilat erzeugen) eine interpretierte Sprache. Da muss erst zur Laufzeit das Element da sein, auf das man sich beziehen möchte.

Was aber nicht geht, und wofür ich da grad keine Erklärung habe, warum im folgenden Code eine Closure entsteht:

let myObject = {
	array1: [1, 2, 3],

	foo: () => { console.log(this.array2); }
};

myObject.array2 = myObject.array1.map(x => x + 1);

myObject.foo(); // undefined

Ausgetauscht ist in foo() das myobject durch this. Aber das verweist nicht auf das Objekt sondern auf window (wenn man das dort mit console.log(this); prüft).

Ahh, habs rausgefunden, mithilfe des TypeScript-Playgrounds.

let myObject = {
	foo: () => { console.log(this.array2); }
};

wird dort übersetzt zu

var _this = this;
var myObject = {
    foo: function () { console.log(_this.array2); }
};

Und da erinnerte ich mich, dass bei den Fat-Arrow-Funktionen () => {} das Typescript das this auf den äußeren Kontext legt. "... the ECMAScript 6 arrow syntax. Arrow functions capture the this where the function is created rather than where it is invoked"

Eine herkömmliche anonymous-function-Notation löst das this erst zur Laufzeit auf. Wenn du dein Objekt so erstellst

let myObject = {
	array1: [1, 2, 3],

	foo: function() { console.log(this.array2); }
};

dann gehts auch mit dem this. Merke: Fat-Arrow-Functions sind keine 1:1-Alternativschreibweise für die herkömmliche anonyme Funktionen.

dedlfix.