为什么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; }));