ES6箭头函数和与Function.prototype.bind绑定的函数之间有什么区别(如果有的话)?

时间:2015-09-12 04:17:21

标签: javascript ecmascript-6 arrow-functions function-binding

在我看来,在ES6中,以下两个函数非常几乎相同:

function () {
  return this;
}.bind(this);

() => {
  return this;
};

最终结果看起来是一样的:箭头函数生成一个JavaScript函数对象,其this上下文绑定到与创建它们的this相同的值。

显然,在一般意义上,Function.prototype.bind比箭头函数更灵活:它可以绑定到本地this以外的值,它可以绑定任何函数{{1}在任何时间点,可能在最初创建之后很久。但是,我并不是问this本身与箭头功能有什么不同,我问的是箭头功能与立即使用bind立即调用bind的方式不同。

ES6中的两个构造之间是否存在差异?

3 个答案:

答案 0 :(得分:35)

没有(重大)差异。

嗯,好吧,那有点不成熟。箭头函数有三个 tiny 差异。

  1. 箭头功能不能与new一起使用。

    当然,这意味着它们没有prototype属性,不能用于创建具有经典启发语法的对象。

    new (() => {}) // TypeError: () => {} is not a constructor
    

    这可能是最好的,但new的工作方式对于绑定函数没有多大意义。

  2. 箭头函数无权访问普通JavaScript函数可以访问的特殊arguments对象。

    (() => arguments)(1, 2, 3) // ReferenceError: arguments is not defined
    

    这个可能更像是一个陷阱。据推测,这是为了消除JavaScript的其他奇怪之处。 The arguments object is its own special beast,它有奇怪的行为,所以扔掉它并不奇怪。

    相反,ES6的splats可以完成同样的事情而没有任何神奇的隐藏变量:

    ((...args) => args)(1, 2, 3) // [1, 2, 3]
    
  3. 箭头函数没有自己的new.target属性,如果它们存在,则使用其封闭函数的new.target

    这与删除"魔法"的其他更改一致。引入了箭头函数的值。如上所述,考虑到箭头函数无法与new一起使用,这种特殊变化尤为明显。

  4. 否则,箭头就像绑定函数一样,在语义上。箭头可以提高性能,因为它们不必随身携带额外的行李,因为它们不需要先从普通功能转换,但是它们不是行为完全一样。

答案 1 :(得分:29)

存在一些差异:

  • 无法构建箭头函数。虽然箭头函数和绑定函数都没有self属性,但前者在使用#import <EstimoteSDK/ESTFirmwareInfoVO.h> 调用时会抛出异常,而后者只是忽略绑定值并将其目标函数作为构造函数调用(但是,在新实例上使用部分应用的绑定参数)。

    .prototype
  • 箭头功能也有词汇newfunction F() {} var f = () => {}, boundF = F.bind({}); console.log(new boundF(), new boundF instanceof F) // {}, true console.log(new f) // TypeError arguments(不仅仅是词汇new.target)。对箭头函数的调用不会初始化任何这些函数,它们只是从定义了箭头函数的函数继承而来。在绑定函数中,它们只是引用目标函数的相应值。

  • 箭头函数实际上并不绑定super值。相反,它们没有一个,当你使用this时,它会像词法范围中的变量名一样被查找。这允许您在this尚不可用时懒洋洋地定义箭头函数:

    this
  • 箭头函数不能是生成器函数(尽管它们可以返回生成器)。您可以在生成器函数上使用this,但无法使用箭头函数表达此信息。

答案 2 :(得分:4)

这是一个更微妙的区别:

箭头函数可以在不使用'return'关键字的情况下返回值,省略=&gt;后面的{}括号立即

var f=x=>x;           console.log(f(3));  // 3
var g=x=>{x};         console.log(g(3));  // undefined
var h=function(x){x}; console.log(h(3));  // undefined
var i=x=>{a:1};       console.log(i(3));  // undefined
var j=x=>({a:1});     console.log(j(3));  // {a:1}