Warum gibt this.prop im Konstruktor undefined zurück

Question

Ich bin auf der Suche nach der offensichtlichen Diskrepanz in dem, was die Protokolle des folgenden Codes zurückgeben. Ich erwarte, dass sie gleichwertig sind und nicht undefined zurückgeben. Allerdings gibt man undefined zurück, während der andere nicht.

var floors = [ { number : 4, desc : `The obj from the floors array` } ] 
 

 
function Unit (number) { 
 
    this.number = number 
 
    this.floor = Number(String(this.number)[0]) // no issue with a this.property reference here 
 
    
 
    console.log(this.floor) // evals to 4 here so why not on the next line? 
 
    console.log(floors.find(function (floor) { return floor.number === this.floor })) // Why does this return undefined 
 
    console.log(floors.find(function (floor) { return floor.number === 4 })) // but this does not? 
 
} 
 

 
new Unit (425)

Answer 1

Denn mit normalen Funktionen wird this durch definiert, wie die Funktion genannt wird, nicht dort, wo die Funktion erscheint. In Ihren find Rückrufen ist this nicht dasselbe wie es ist außerhalb Ihre find Rückrufe.

Sie haben mindestens vier Optionen:

1. Übergeben Sie das zweite Argument find: Es wird definiert, was this in der Callback sein wird:

   console.log(floors.find(function (floor) { 
       return floor.number === this.floor; 
   }, this)); 
   // ^^^^ 
   

2. Verwenden Function#bind eine gebunden zu erstellen Funktion:

   console.log(floors.find(function (floor) { 
       return floor.number === this.floor; 
   }.bind(this))); 
   // ^^^^^^^^^^^ 
   

   Eine gebundene Funktion ignoriert die this, mit der es aufgerufen wird, anstatt die an sie gebundene zu verwenden.

3. eine Variable definieren und setzen Sie ihn auf this, dann verwenden Sie diese Variable innerhalb der Rückrufe:

   var me = this; // The variable 
   console.log(floors.find(function (floor) { 
       return floor.number === me.floor; 
   //       ^^ 
   })); 
   

4. mit ES2015 starten, können Sie eine Pfeil Funktion verwenden, die über die this des schließt Kontext, in dem es definiert ist;

   console.log(floors.find(floor => floor.number === this.floor)); 
   

   Oder hier ist die längere Form: in Ihrem Fall, können Sie die prägnante Form ohne {} verwenden

   console.log(floors.find(floor => { return floor.number === this.floor; }));