Geltungsbereich von "this" innerhalb der Objektdeklaration

Question

Beim Erstellen eines Objekts in JavaScript scheint this nicht auf das Objekt zu zeigen, das ich erstelle.

In dem folgenden Beispiel sollte anArrayValue"a" sein, aber es wird als protokolliert.

const anArray = ['a', 'b', 'c']; 
 

 
const anObject = { 
 
    arrayIndex: 0, 
 

 
    // I want to use anObject.arrayIndex here, but it's undefined 
 
    anArrayValue: anArray[this.arrayIndex], 
 

 
    log() { 
 
    console.log(this.anArrayValue); 
 
    } 
 
}; 
 

 
//logs undefined 
 
anObject.log();  
 

 
//logs 'a' 
 
console.log(anArray[anObject.arrayIndex]);

Answer 1

'this.arrayIndex' wird tatsächlich als 'window.arrayIndex' interpretiert (dies bezieht sich auf das globale "window" -Objekt hier im Browser).

Sie können den folgenden Code in Ihrer JavaScript-Konsole versuchen, das gesamte globale Objekt nicht im StackOverflow-Snippet auszugeben.

const anArray = ['a', 'b', 'c']; 
 
const anObject = { 
 
     arrayIndex: 0, 
 
     anArrayValue: anArray[(function(arg){console.log('this :', this); return arg.arrayIndex})(this)], 
 
     log() { 
 
     console.log(this.anArrayValue); 
 
     } 
 
    };

Und das globale Objekt offensichtlich hat keine arrayIndex Eigenschaft, sofern nicht ausdrücklich erstellt:

const anArray = ['a', 'b', 'c']; 
 
arrayIndex = 0; // here we create the arrayIndex for the global object 
 
const anObject = { 
 
     arrayIndex: 0, 
 
     anArrayValue: anArray[this.arrayIndex], 
 
     log() { 
 
     console.log(this.anArrayValue); 
 
     } 
 
    }; 
 

 
console.log("anObject.anArrayValue :", anObject.anArrayValue);

log() auf der anderen Seite ist eine Objektmethode und als solche this bezieht sich auf das Objekt, um es gehört:

Wenn eine Funktion als ein Verfahren eines Objekt aufgerufen wird, der dies das Objekt festgelegt wird das Verfahren aufgerufen wird.

Referenz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

hoffe, das hilft!

Answer 2

Nein, während Objektbau diese tut nicht auf das Objekt beziehen youre in. Wenn es so Objekte nicht stabil wäre wäre und nicht optimiert werden konnten. Allerdings könnte man einfach den arrayIndex außerhalb davon bewegen:

const anArray = ['a', 'b', 'c'], arrayIndex = 0; 

const anObject = { 
    arrayIndex,  
    anArrayValue: anArray[arrayIndex], 

    log() { 
    console.log(this.anArrayValue); 
    } 
}; 

Answer 3

this Kontext kann nicht bei der Deklaration verwendet werden. Sie können jedoch einen getter verwenden, um den Wert zurückzugeben, der beim Aufruf ausgeführt wird (und daher Zugriff auf this hat).

const anArray = ['a', 'b', 'c']; 
 

 
    const anObject = { 
 
     arrayIndex: 0, 
 
     // Use a getter to execute the expression upon call 
 
     get anArrayValue() { return anArray[this.arrayIndex] }, 
 
     log() { 
 
     console.log(this.anArrayValue); 
 
     } 
 
    }; 
 
    anObject.log(); 
 
    //logs 'a' 
 
    console.log(anArray[anObject.arrayIndex]); 
 
    //logs 'a'

Answer 4

Das hier Problem ist, dass this.arrayIndex nicht das tut, was Sie denken, es ist.

Betrachten Sie dieses Beispiel:

let parent = { 
 
    a: ['parent a'], 
 
    method() { 
 
     let child = { a: ['child a'], b: this.a[0] }; 
 
     console.log(child.b); 
 
    } 
 
} 
 

 
parent.method(); // Outputs 'parent a', not 'child a' 
 
//^^^^   // <-- This decides that `this` is.

Wenn so ein Objekt deklariert, this die einzige Zeit erstellen, verweisen auf das Objekt, das Sie ist, wenn es in einer Funktion auf das Objekt zugeordnet ist.

Um klar zu sein, verweist this immer auf das Objekt, das die Funktion enthält, die Sie aufrufen. Das heißt, wenn Sie einem anderen Objekt method zugewiesen und es dann aufgerufen haben, würde es auf das neue Objekt verweisen.

Beispiel:

let newObject = { a: ['newObject a'], method: parent.method }; 
newObject.method(); // This outputs 'newObject a' 

Die Ausnahme ist, wenn Sie Fett Pfeil (() =>) Funktionsdeklarationen verwenden, wobei in diesem Fall this vom Anwendungsbereich geerbt, die die Funktion deklarierten, unabhängig davon, wo die Funktion aufgerufen wird von.

Answer 5

"this" wird zu Beginn des Funktionsaufrufs definiert. Hier sind Sie nicht in der Methode von AnObjet. Sie müssen den Wert vor dem Deklarieren des Objekts speichern.

const anArray = ['a', 'b', 'c']; 

const DEFAULT_ARRAY_INDEX = 0; 

const anObject = { 
    arrayIndex: DEFAULT_ARRAY_INDEX, 

    anArrayValue: anArray[DEFAULT_ARRAY_INDEX], 

    log: function() { 
     console.log(anObject.anArrayValue); 
    } 
}; 

anObject.log();  

console.log(anArray[anObject.arrayIndex]); 

Sie können auch eine Initialisierungsmethode verwenden. Oder machen Sie eine Klasse mit einem Konstruktor.