JavaScript 函数调用脱糖

Question

我找到了 this这篇文章说 JavaScript 函数调用实际上只是 func.call(...) 的语法糖。

我想问一下这是不是真的，因为我在规范中没有找到类似的东西(还没有真正彻底地检查它，只是简单地浏览一下并搜索单词 call()).

如果有人能启发我，那就太好了，因为如果这篇文章是真的，我对 EcmaScript 语言的钦佩可能会减少。

Answer 1

我明白为什么这篇文章会这么说，而且在某种程度上是这样。

他们声称的原因可能是因为直接使用的函数是未绑定(bind)的，这意味着如果我创建一个对象:

const a = { say: function() { console.log(this.message) } };
a.message = 'hello';
a.say();

当我运行函数 a.say() 时，say() 中的 this 上下文是 a。这相当于 a.say.call(a)。

因为我没有显式地绑定(bind)那个函数，如果我把它传递到其他地方可以调用它，它就不再一定有 a 的上下文了:

const a = { say: function() { console.log(this.message) } };
const b = {};
a.message = 'hello';
b.message = 'goodbye';
b.say = a.say;
b.say();

请注意，即使我复制了 a 的 say()，当用 b 调用时，它最终被调用为 b 因为它是上下文 (this)。因此，它本质上等同于 a.say.call(b)。

如果您显式绑定(bind)函数，那么它将始终使用固定的上下文:

const a = { say: function() { console.log(this.message); } };
const b = {};
a.message = 'hello';
b.message = 'goodbye';
b.say = a.say.bind(a);
b.say();

绑定(bind)后，它现在将始终使用 a 的上下文，即使我可能会将函数传递到其他地方。

话虽如此，我不确定为什么您的钦佩会受到影响。实际上，我发现这是该语言的一个很棒的特性，它使它非常强大和灵活。它允许你做这样的事情:

Array.prototype.slice.call(document.querySelectorAll('div'))
  .forEach(el => console.log(el.innerHTML));

<div>A</div>
<div>B</div>
<div>C</div>

在该示例中，document.querySelectorAll() 返回一个 NodeList，它通常没有 forEach()。但是，由于它足够兼容，我可以使用 call() 将其传递给 Array.prototype.slice 以将其转换为 Array与那些元素。 (您也可以直接将其提供给 forEach()，但我更喜欢使用 slice() 对其进行转换，然后再做进一步的事情。)