コンストラクタのthis.propが未定義に戻る理由

Question

以下のコードのログが返すものの見かけの不一致を理解したいと思っています。私はそれらが同等であり、返さないと期待しますundefined。しかし、一方はundefinedを返し、他方は返さない。

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

通常の機能で、thisは、関数がと呼ばれる方法をによって定義され、ない機能が表示される場所であるためです。 findコールバックでは、thisはと同じではなく、のfindコールバックです。

あなたは、少なくとも4つのオプションがあります。

1. はfindに2つ目の引数を渡す：それはthisはコールバックでどうなるか定義しています

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

2. 使用Function#bindバウンドを作成します機能：

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

   バインド関数は、呼び出されたthisを無視し、代わりにバインドされたものを使用します。

3. はその後、コールバックの中にその変数を使用して、変数を定義し、thisに設定します。

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

4. ES2015以降では、のthisの上に閉じ矢印機能を、使用することができますそれが定義されているコンテキスト。

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

   するか、ここに長い形だ：あなたのケースでは、あなたは{}なし簡潔なフォームを使用することができます

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