箭头函数 vs. 绑定函数

Question

阅读这篇文章时，我有点困惑以下引用的含义：

“问题在于每次遇到=>，它都会创建箭头函数的一个新副本。”

作者是什么意思说“每次都会创建一个新副本”？新副本指的是什么？“每次”指的是什么？我在哪里可以找到完全涵盖箭头函数使用和执行流程的参考资料，以及“每次创建一个新副本”的相关内容？

如果作者写成“箭头函数的一个新实例”，那就很清楚了。但他写成了“箭头函数的一个新拷贝”。此外，请不要给我比MDN更简化的解释，只回答为什么作者写成“拷贝”而不是“实例”，或者可能并不是“拷贝”。并回答在他的文章和代码片段的上下文中，“每次”发生在哪里。

- Fox Amadeus

---

可能是Arrow functions inside map in render. React的重复问题。 - Joe Clay

@JoeClay，你在哪里看到问题中有map？我认为这不是重复的问题。这个问题是关于bind和=>的。 - The Reason

可能是 https://dev59.com/oJzha4cB1Zd3GeqPJ78g#40761947 的重复问题。 - Shubham Khatri

这意味着每次函数表达式被评估时，都会实例化一个新的函数对象。这是在React的render函数中不应该做的事情（就像你不应该在那里调用bind一样）。 - Bergi

你认为“copy”这个术语有什么问题吗？如果你想评论词汇选择，最好直接联系原作者。只有他才知道。 - Bergi

Answer 1

const fn = () => {}

"

基本上与旧的相同

"

const fn = (function(){}).bind(this);

Function.prototype.bind 返回一个新函数，每次调用都会返回一个新的函数。因此，最好将绑定函数存储在某个地方，而不是每次遇到时创建它。

- pwolaq

---

如果作者写的是“箭头函数的新实例”，那么理解起来就很清楚了。但他写的是“新副本”。此外，我发现你的答案可能会让其他人感到困惑，因为箭头函数不像绑定那样。如果你查看MDN，你会发现箭头函数使用封闭上下文的this值。 - Fox Amadeus

文章的作者在此。这正是我想表达的意思。 - James Nelson

Answer 2

箭头函数无法像其他函数一样使用this，也无法绑定或传递任何上下文。而且bind总是创建函数对象的副本。

这就解释了文章中的例子。首先，他们使用一个普通函数，以便能够将this绑定到它上面。然后，在第二步中，他们用正确绑定的新function副本覆盖了原始的function对象本身。这是一个巨大的性能提升，因为你只需要做一次，而不是在任何未来的调用中都要做。

以下是this问题的示例：

function testNormal() {
  // 'this' is the object, passed below by 'bind'
  console.log(this);
}

var testArrow = () => {
  // 'this' is always the current parent
  // there is no way to pass an other value to 'this' in an arrow function
  console.log(this);
}

testNormal.bind({data: 'test'})();
testArrow.bind({data: 'test'})();

- eisbehr