Verwenden von 'dieses' Schlüsselwort in JavaScript-Objekt

Question

Ich mag es zu denken, dass ich JavaScript verstehe, aber ich fand etwas unerwartetes heute und ich hoffte, dass jemand mir erklären könnte, warum es passiert.

Nehmen Sie diesen Code

var animalData = { 
        cow:"cow", 
        sheep:"sheep", 
        getCow:function() 
        { 
        return this.cow; 
        }, 
        animalList:[ 
          { 
          animalId:this.cow, 
          label:"This is a cow" 
          }, 
          { 
          animalId:this.sheep, 
          label:"This is a sheep" 
          } 
         ] 
      }; 

console.log(animalData.getCow()); 
console.log(JSON.stringify(animalData.animalList,null," ")) 

Der Ausgang ist nicht das, was ich erwartet hatte. Rufen Sie animalData.getCow() Ergebnisse in "cow" auf, wie Sie es erwarten würden. Aber es ist, was durch die zweite console.log Rückkehr erhält, die mich verwirrt.

[ 
{ 
    "label": "This is a cow" 
}, 
{ 
    "label": "This is a sheep" 
} 
] 

Mit anderen Worten, entfernt das Objekt die animalId Eigenschaft vollständig aus den definierten Objekten. Ich hatte erwartet, dieses

[ 
{ 
    "animalId":"cow", 
    "label": "This is a cow" 
}, 
{ 
    "animalId":"sheep", 
    "label": "This is a sheep" 
} 
] 

Und ich könnte vielleicht dieses

[ 
{ 
    "animalId":undefined, 
    "label": "This is a cow" 
}, 
{ 
    "animalId":undefined, 
    "label": "This is a sheep" 
} 
] 

verstehen Aber warum die animalId Eigenschaft erhalten vollständig entfernt?

Kann jemand erklären, was unter der Oberfläche passiert, um dieses Verhalten zu verursachen? Ich vermute, dass das Schlüsselwort this nicht funktioniert, weil die Eigenschaften nicht definiert sind, wenn es aufgerufen wird, aber warum wird die Eigenschaft vollständig entfernt?

NB: Ich suche keine Workaround, das ist einfach genug zu tun - nur daran interessiert, warum es passiert.

JSFiddle here

Answer 1

An dem Punkt, das Objekt initialisiert wird, bezieht this auf den äußeren Rahmen, der nicht cowsheep und Eigenschaften haben. Wie Sie dachten, wird dies dazu führen, dass animalId s undefined ist.

JSON.stringify does certain things mit undefined Eigenschaften, nämlich:

Wenn undefined, eine Funktion oder ein Symbol wird während der Umwandlung aufgetreten ist es entweder weggelassen oder zensiert null (wenn es in einem Objekt gefunden wird) (wenn es in einem Array gefunden wird).

Deshalb sehen Sie sie nicht.

Answer 2

Zu allererst Sie richtig Ihrem letzten Beispiel sind, das ist, was Sie zu stringify versuchen:

[ 
{ 
    "animalId":undefined, 
    "label": "This is a cow" 
}, 
{ 
    "animalId":undefined, 
    "label": "This is a sheep" 
} 
] 

Und weil diese Werte sind nicht definiert JSON.stringify sich einfach weglässt. Warum die obigen Werte nicht definiert sind, liegt daran, dass sich das Schlüsselwort this in this.cow auf den aktuellen Bereich bezieht, der eigentlich das Objekt window ist, da es sich in keiner anderen Funktion befindet.

Warum ist es sinnvoll, Tasten mit undefined Werten wegzulassen?Denn ob sie existieren oder nicht, wenn Sie versuchen, auf object.key zuzugreifen erhalten Sie den richtigen Wert: undefined