Question

我试图弄清楚在将函数传递给数组的map方法时如何绑定“ this”。

我有以下代码（您可以see on StackBlitz）：

import './style.css';

class Foo {
  public method() { return this ? `"this" is a ${this.constructor.name}`
                                : '"this" is undefined'; }
}

class Caller {
  public method1(array) {
    return array.map(function() { return foo.method(); });
  }
  public method2(array) {
    return array.map(this.callMethod);
  }
  public method3(array) {
    return array.map(foo.method);
  }
  public method4(array) {
    return array.map(v => foo.method());
  }
  private callMethod() { return foo.method(); }
}

const foo = new Foo();
const caller = new Caller();
const array = [1];

document.getElementById('app').innerHTML = `
  <dl>
    <dt>Expected</dt>
    <dd>${foo.method()}</dd>
    <dt>Method 1 (anonymous function)</dt>
    <dd>${caller.method1(array)}</dd>
    <dt>Method 2 (class method)</dt>
    <dd>${caller.method2(array)}</dd>
    <dt>Method 3 (function reference)</dt>
    <dd>${caller.method3(array)}</dd>
    <dt>Method 4 (lambda function)</dt>
    <dd>${caller.method4(array)}</dd>
  </dl>
`;

这将提供以下输出：

Expected
  "this" is a Foo
Method 1 (anonymous function)
  "this" is a Foo
Method 2 (class method)
  "this" is a Foo
Method 3 (function reference)
  "this" is undefined
Method 4 (lambda function)
  "this" is a Foo

因此，在所有情况下，除了直接引用函数成员时，都将method绑定到this对象来调用Foo方法。

我无法将其与MDN上的array.prototype.map的{{3}}相乘，

如果提供thisArg参数来映射，它将用作回调的this值。否则，未定义的值将用作此值。

在上述任何一种情况下，我都没有明确提供一个thisArg参数，那么为什么4种方法中的3种“起作用”？

PS。额外的问题：为什么，如果我注释掉第一行（import './style.css'），这会使方法3突然也起作用吗？！

Answer 1

在上述所有情况下，我都没有明确提供thisArg参数，那么为什么4种方法中的3种“起作用”？

您没有为thisArg回调提供map参数，但是您没有在this回调中测试map，在this中测试Foo.method，在这3种方法中，这全部称为

foo.method()

保证在method内将是foo（并且与map无关，这就是使用.运算符调用方法的一般行为）。 / p>

PS。额外的问题：为什么，如果我注释掉第一行（导入'./style.css'），这会使方法3突然也起作用吗？！

那不是我所看到的。这是我删除import语句时显示的内容：

"this" is a Window

与non-strict mode一致，其中this设置为全局对象（如果函数未接收到该对象）。

调用array.map时如何设置“ this”？

1 个答案: