「this」在函數中的某個對象的函數中

Question

我對節點模塊中this的行爲非常困惑。下面是相關片段：

module.exports = function(environment) { 
    var config = require('./config'); 

    return { 
     config: config, 
     agencies: ["string1", "string2"], 

     getRoutes: function(callback) { 
      var API = "/api/route/"; 
      this.agencies.forEach(function(agency) { 
       console.log(this.config); //Returns undefined?? 
      } 
     } 
    } 
} 

望着MDN documentation on this說，在以物體的功能的this指對象。然後我會期待console.log(this.config)引用require'd config模塊。相反，目前尚不清楚this最終是指什麼，除了它沒有「config」屬性。

顯然有一個範圍正在改變，但我不知道在哪裏。 forEach？我試圖只是console.log(this)，但我收回了一個我無法破譯的巨大對象。

我不明白爲什麼配置超出此功能的範圍。這是怎麼回事？

Answer 1

這是undefined，因爲函數中默認值this是全局對象。

爲了修正它，通過將對象作爲第二個參數.forEach()

this.agencies.forEach(function(agency) { 
    console.log(this.config) 
}, this) 
// ^---sets the `this` value 

---

方式this作品是，它是由函數是如何稱爲確定。因爲.forEach()不知道回調中的this值是什麼，所以它將其保留爲默認值（全局對象）或undefined（嚴格模式下）。

通過傳遞第二個參數，您告訴它手動將this設置爲您提供的任何內容。

它是如何實現這個功能的（或者你怎麼做到的）就是使用函數的.call()或.apply()方法調用函數。

myFunction.call({foo:"bar"}); 

現在myFunction將與設置爲它的this值{foo:"bar"}對象被調用。

Answer 2

上下文切換髮生在循環，因爲裏面我相信這是「機構」

module.exports = function(environment) { 
var config = require('./config'); 

return { 
    config: config, 
    agencies: ["string1", "string2"], 

    getRoutes: function(callback) { 
     var API = "/api/route/"; 
     var self = this; 
     this.agencies.forEach(function(agency) { 
      console.log(self.config); //Returns undefined?? 
     } 
    } 
} 
} 

Answer 3

的this價值取決於它是如何在函數被調用。

這是它在功能：

function(agency) { 
    console.log(this.config); //Returns undefined?? 
} 

它作爲參數傳遞agencies.forEach。 agencies是一個數組，所以我們可以看看the documentation：

如果thisArg參數提供的forEach，它會通過調用時，用作this值回調。否則，未定義的值將被傳遞以用作其值。

所以this是undefined。

根據上述文檔，您可以爲this傳遞不同的值。

this.agencies.forEach( 
     function(agency) { 
      console.log(this.config); //Returns undefined?? 
     }, 
     this 
); 

---

在這種情況下，你可以使用一個閉合。 config（來自var config = require('./config');）仍然在範圍內。所以只需使用config而不是this.config。

Answer 4

函數內的this的值取決於創建和調用它的情況。當您使用forEach時，您將傳遞一個匿名函數作爲第一個參數，該參數具有this引用的其自己的塊範圍。

有幾種方法可以控制函數中的this的值。您可以創建在父範圍局部引用，這是通過關閉訪問：

getRoutes: function(callback) { 
     var API = "/api/route/"; 
     var me = this; // local reference to the current scope 
     this.agencies.forEach(function(agency) { 
      console.log(me.config); // accessed via closure 
     }); 
    } 

...你可以bind功能：

getRoutes: function(callback) { 
     var API = "/api/route/"; 
     this.agencies.forEach(function(agency) { 
      console.log(this.config); 
     }.bind(this)) 
    } 

...或者你可以通過上下文第二個參數給forEach，讓引擎綁定範圍內爲您提供：

getRoutes: function(callback) { 
     var API = "/api/route/"; 
     var me = this; 
     this.agencies.forEach(function(agency) { 
      console.log(this.config); 
     }, this); 
    } 

文檔

• forEach - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
• bind - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind