如何在Array.map中獲得正確的“this”？

Question

我認為有一些應用程序call或apply在這里，但我不知道如何實現它。

http://codepen.io/anon/pen/oXmmzo

a = {
  foo: 'bar',
  things: [1, 2, 3],
  showFooForEach: function() {
    this.things.map(function(thing) {
      console.log(this.foo, thing);
    });
  }
}

a.showFooForEach();

假設我想map一個數組，但在函數中，我需要訪問foo所屬的this 。 map的function創建了一個新的this上下文，所以我顯然需要以某種方式反駁那個上下文，但是如何在仍然可以訪問thing時這樣做呢？

Answer 1

剛剛意識到我應該更仔細地閱讀Array.map()的文檔。 一個人只需要傳遞this值作為map()的第二個參數

http://codepen.io/anon/pen/VLggpX

a = {
  foo: 'bar',
  things: [1, 2, 3],
  showFooForEach: function() {
    this.things.map(function(thing) {
      console.log(this.foo, thing);
    }, this);
  }
}
a.showFooForEach();

此外，理解bind() ， call()和apply()工作對於認真的JavaScript開發人員來說是必須的。 這些允許我們跳過愚蠢的任務，如

var self = this;
myItems.map(function(item) {
  self.itemArray.push(item);
});

同

myItems.map(function(item) {
  this.itemArray.push(item);
}.bind(this));

Answer 2

自2018年起，您可以使用箭頭功能：

a = {
  foo: 'bar',
  things: [1, 2, 3],
  showFooForEach: function() {
    this.things.map((thing) => {
      console.log(this.foo, thing);
    });
  }
}

a.showFooForEach();

您可以將bind()用於您的上下文。

a = {
  foo: 'bar',
  things: [1, 2, 3],
  showFooForEach: function() {
    this.things.map(function(thing) {
      console.log(this.foo, thing);
    }.bind(this));
  }
}

a.showFooForEach();

那是因為JS詞匯范圍

來自MDN：

bind（）方法創建一個新函數，在調用時，將其this關鍵字設置為提供的值，並在調用新函數時提供任何前面提供的給定參數序列。

在這里閱讀更多內容： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

在這里： http ： //javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/

另外， map()確實接受第二個參數為“this”

a = {
  foo: 'bar',
  things: [1, 2, 3],
  showFooForEach: function() {
    this.things.map(function(thing) {
      console.log(this.foo, thing);
    }, this);
  }
}

a.showFooForEach();

來自MDN map()文檔：

參數

callback生成新數組元素的函數

thisArg 可選 。 執行回調時要使用的值。

進一步閱讀： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

簡短的建議

PS。：當您想對數組執行某些操作時，通常會調用Array.map，例如為每個項添加10，或者類似的東西......因為Array.map返回一個新數組。 如果您只使用console.log或不會影響陣列本身的東西，您可以使用Array.forEach調用

Answer 3

沒有什么復雜的需要！ map需要thisArg的第二個參數，所以你只需要在每個項目上調用你想要調用的函數：

a = {
  foo: 'bar',
  things: [1, 2, 3],
  showFooForEach: function() {
    this.things.map(function(thing) {
      console.log(this.foo, thing);
    }, this);
  }
}

a.showFooForEach();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 4

有三種方式：

一個普通的變量

一個不具有的特殊奇怪this ：

var self = this;
this.things.map(function(thing) {
  console.log(self.foo, thing);
});

Function.prototype.bind

this.things.map(function(thing) {
  console.log(this.foo, thing);
}.bind(this));

使用Array.prototype.map的第二個參數

（可選）第二個參數是調用內部函數的上下文。

this.things.map(function(thing) {
  console.log(this.foo, thing);
}, this);

---

前兩種方式是處理this情況的通用方法; 第三個特定於map ， filter ， forEach 。

Answer 5

map允許第二個名為“thisArg”的參數，所以你只需使用它：

showFooForEach: function() {
    this.things.map(function(thing) {
      console.log(this.foo, thing);
    },this);