爲什麼this.prop在構造函數中返回undefined

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回調。

你至少有四個選項：

1. 傳遞的第二個參數find：它定義什麼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))); 
   // ^^^^^^^^^^^ 
   

   A 綁定函數會忽略它被調用的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; }));