.forEach 中 thisArg 的用途是什么？答案

【问题标题】：What is the purpose of thisArg in .forEach?.forEach 中 thisArg 的用途是什么？
【发布时间】：2016-01-01 13:31:56
【问题描述】：

JavaScript 的 forEach documentation 声明 .forEach 语法是：

arr.forEach(callback[, thisArg])

thisArg有什么用？

【问题讨论】：

正如文档所说 Optional. Value to use as this when executing callback. - if (arguments.length > 1) {T = thisArg;}
我投票决定将此问题作为题外话结束，因为它要求解释已经有据可查的内容。
@LoïcFaure-Lacroix 你在说什么？我问一个文档示例，对我来说不清楚
一个search for those keywords给了你很多例子
meta discussion on this question的通知

标签： javascript foreach

【解决方案1】：

thisArg 指的是应该调用回调的上下文，基本上它就是this 指内部回调。例如：

var myObject = { name: 'myObject' };

[1,2].forEach(function(item) { 
 console.log(item); // 1, 2
 console.log(this === myObject); // true
}, myObject)

【讨论】：

【解决方案2】：

可以提供thisArg来改变回调函数的内部this。 见下文。

如果您对以下事实感到困惑，thisArg 在使用箭头函数时什么都不做：

var myObject = { name: 'myObject' };

[1,2].forEach(item => { 
  console.log(item);                     // 1, 2
  console.log(this === myObject, this);  // false  Window {}
}, myObject)

因为

箭头函数不能绑定

与普通功能的上下文绑定。

var myObject = { name: 'myObject' };

[1,2].forEach(function(item){ 
  console.log(item);                     // 1, 2
  console.log(this === myObject, this);  // true  {name: "myObject"}
}, myObject)

如果此时您不指定myObject，则内部的this 将与箭头函数一样指向Window。

【讨论】：

谢谢，我遇到了麻烦。

【解决方案3】：

this 值是与execution context 相关的特殊对象。

执行上下文被激活的对象

this的值在进入上下文时只确定一次并且无法为此分配新值

在你的情况下，提供thisArg 就像

arr.forEach(callback.bind(thisArg));

forEach，为你简化了，要求一个单独的可选参数

现在，如果你在没有 this 的情况下运行这个 forEach

arr.forEach(function(item) {
    console.log(this === window); //true
    console.log(this === arr);    //false
});

你明白了！

【讨论】：

小注：如果不指定，this只会在非严格模式下成为全局对象，在严格模式下会是undefined。如果arr 是全局对象并且它继承自Array.prototype 并且模式不严格，则this == arr 可能为真。

【解决方案4】：

我认为这些测试会让整个事情变得清晰只需在浏览器控制台中测试

arr=[0];

arr.forEach(function(item) {
    console.log(this === window); //true
    console.log(this === arr);    //false
});

arr.forEach(function(item) {
    console.log(this === window); //true
    console.log(this === arr);    //false
},this);

arr.forEach(function(item) {
    console.log(this === window); //false
    console.log(this === arr);    //true
},arr);

arr.forEach(function(item) {
    console.log(this === window); //false
    console.log(this === arr);    //false
},0);

【讨论】：

【解决方案5】：

我经常在原型和函数的上下文中使用它：

var MyClass = function() {
  this.GlobalVar = 3;
}

MyClass.prototype.func1 = function(a) {
  return (a == this.GlobalVar);
}

MyClass.prototype.func2 = function(arr) {
  arr.forEach(function(item) {
    console.log(this.func1(item));
  }, this); // use of thisArg
}

MyClass.prototype.func3 = function(arr) {
  var that = this;
  arr.forEach(function(item) {
    console.log(that.func1(item));
  }); // also possible without using thisArg
}

MyClass.prototype.func4 = function(arr) {
  arr.forEach(function(item) {
    console.log(this.func1(item));
  }); // implementation raising an error, because this.func1 does not exist in that context
}

var arr = [0, 1, 3, 4, 3, 1];
var myClass = new MyClass();
myClass.func2(arr);
/* prints:
false
false
true
false
true
false
*/
myClass.func3(arr) /* same as func2 */
myClass.func4(arr); /* Fails with
Error: {
  "message": "TypeError: this.func1 is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 35,
  "colno": 26
}
*/

【讨论】：