如何在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一个数组,但在功能,我需要访问this到其foo所属.在function中map创建一个新的this背景,所以我显然需要coerse这方面早在某种程度上,但我怎么做,同时还具有访问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.