为什么不能在Arrow函数中省略getElementById()的参数?

JavaScript在“方法调用”和“函数调用”之间有区别。前者将设定 this ,后者不会。从语法上讲,方法调用必须是 receiver.method(...args) . 没有点,没有方法调用。所以,这个:

document.getElementById(id) // method call, `this` is set to `document`
m = document.getElementById; m(id) // function call, `this` is not set

当你这样做的时候 map(document.getElementById) , document.getElementById 是从其对象中提取的函数;当 map 调用它,它将在没有接收者的情况下调用它, 这 不会被安排,事情会变得糟糕。

有一种方法可以保存它: bind ,它通过将接收器绑定到函数来“方法化”函数: map(document.getElementById.bind(document)) 应该有用。

编辑:进一步说明:

let foo = {
  bar: function(context) {
    let receiver =
      (this == window) ? "window" :
      (this == foo) ? "foo" :
      "unknown";
    console.log(context + ", `this` is `" + receiver + "`");
  }
}

function call(fn, param) {
  fn(param);
}

foo.bar("In direct call");
let baz = foo.bar; baz("When assigned to a variable");
call(foo.bar, "When passed as a parameter")
let quux = foo.bar.bind(foo); quux("When bound to foo");

如果你能进去 document 到 map() 秒 this 参数,它将为调用 getElementById . 但不确定这是否比仅仅使用箭头函数有所改进。

let myArray = ['img1', 'img2', 'img3'].map(document.getElementById, document)

console.log(myArray)

<p id="img1"><p>
<p id="img2"><p>
<p id="img3"><p>