箭头功能与绑定功能

时间:2018-01-24 11:53:39

标签: javascript reactjs arrow-functions

在阅读the article时,我对以下引用感到有点困惑。

  

这里的问题是,每次遇到=>时,都会创建箭头功能的新副本。

每次一个新副本时,作者的意思是什么?什么的新副本?什么是每次?我在哪里可以找到一个完全包含箭头功能的使用和执行流程的参考,每次都创建一个新的副本

如果作者写了箭头函数的新实例,那就很清楚了。但他写了箭头函数的新副本 。 此外,与箭头函数的工作原理MDN相比,请不要给我更简单的解释。只需回答为什么作者写了 copy 而不是实例或者可能没有。并回答每次在他的文章和代码块的上下文中发生的地方。

2 个答案:

答案 0 :(得分:3)

const fn = () => {}

与旧版

基本相同
const fn = (function(){}).bind(this);

Function.prototype.bind在每次调用时都返回一个新函数。这就是为什么在某个地方存储绑定函数而不是在每次遭遇时都创建它的好主意。

答案 1 :(得分:1)

它属于这样一个事实,即箭头函数不能以你可能从其他方面知道它的方式使用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'})();