Question

我认为这里有一些call或apply的应用，但我不确定如何实现它。

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

a.showFooForEach();

我想要map一个数组，但在函数中，我需要访问this所属的foo。 function的{{1}}创建了一个新的map上下文，因此我显然需要以某种方式反驳该上下文，但如何在仍然可以访问this的情况下执行此操作？

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（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

在此处阅读更多内容：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()接受第二个参数为＆＃34;此＆＃34;

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的特殊奇怪之处：</ p>

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允许第二个名为＆＃34; thisArg＆＃34;所以你就这样使用它：

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

我如何得到正确的＆＃34;这个＆＃34;在Array.map？

5 个答案: