javascript - 为什么包含 "this"的方法不能作为数组方法传入另一个方法中

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 3 年前。

我可以理解 A 不起作用，因为我是从外部调用的，但为什么 B 不起作用？我想当一个方法调用另一个方法时，this指的是对象？

const foo = {
  bar: 'bar',
  sayBar() {
    console.log(this.bar);
  },
  sayBar3times() {
    [1, 2, 3].forEach(this.sayBar);
  },
};

/* test A */ [1, 2, 3].forEach(foo.sayBar); // doesn't work
/* test B */ foo.sayBar3times(); // doesn't work either

我能理解

Answer 1

这是因为当你执行[].forEach(this.sayBar)时，this实际上引用了windows对象。当您使用箭头函数调用 this.sayBar 时，您将词法 this(即对象本身)传递给该函数。

Note: If passing the callback function uses an arrow function expression, the thisArg parameter can be omitted, since all arrow functions lexically bind the this value.

Source

正是出于这个原因，这就是为什么 Array.prototype.forEach 接受 thisArg 作为第二个位置参数，因此您可以执行 [].forEach( this.sayBar, this) 它将起作用:

const foo = {
  bar: 'bar',

  sayBar() {
    console.log(this.bar);
  },

  sayBar3times() {
    // this doesn't work:
    [1, 2, 3].forEach(this.sayBar);
    
    // this works:
    [1, 2, 3].forEach(this.sayBar, this);
    
    // this works:
    [1, 2, 3].forEach(() => {
      this.sayBar();
    });
  },
};

foo.sayBar3times();

关于您更新的代码，答案是相同的:

• 测试 A 不会在回调中绑定(bind) foo，因此 this 引用全局对象 window。只需执行 [1, 2, 3].forEach(foo.sayBar, foo) 即可解决此问题。在这种情况下，方法调用中的 this 现在将引用 foo 对象。

• 测试 B 确实有效，因为 sayBar3times 在 forEach() 中也缺少绑定(bind)上下文。因此，如果您正确提供 thisArg，通过执行 [1, 2, 3].forEach(this.sayBar, this) 它将起作用

在这两个示例中，您都需要为 Array.prototype.forEach 中的回调提供 thisArg:

const foo = {
  bar: 'bar',
  sayBar() {
    console.log(this.bar);
  },
  sayBar3times() {
    [1, 2, 3].forEach(this.sayBar, this);
  },
};

/* test A */
[1, 2, 3].forEach(foo.sayBar); // doesn't work
[1, 2, 3].forEach(foo.sayBar, foo); // works

/* test B */
foo.sayBar3times(); // works