ES6的箭头函数和Function.prototype.bind绑定的函数有什么区别（如果有的话）？

在我看来，在ES6中，以下两个函数几乎是相同的： 

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

最终的结果看起来是一样的：箭头函数产生一个JavaScript函数对象，它们的this上下文被绑定到与创build它们相同的值。

显然，在一般意义上， Function.prototype.bind比箭头函数更灵活：它可以绑定到除本地以外的值，并且可以在任何时间点绑定任何函数。 然而，我不是问如何bind本身是不同的箭头function，我问如何箭头function不同于立即调用bind与this 。

ES6中两个构造之间是否有区别？

没有（显着）差异。

那么，好吧，这有点不成熟。 箭头function有三个独特的细微差别。

  1. 箭头function不能用于new 。

    当然，这意味着它们没有prototype属性，不能用于使用经典的语法来创build对象。 

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

    尽pipe这可能是最好的 – new作品对于约束函数没有多less意义。

  2. Arrow函数不能访问普通JavaScript函数可以访问的特殊arguments对象。 

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

    这个可能是一个小问题。 据推测这是为了消除JavaScript的其他怪异之一。 arguments对象是它自己特别的野兽 ，它有奇怪的行为，所以它被抛出并不奇怪。

    相反，ES6有splats可以完成同样的事情，没有任何魔术隐藏的variables： 

     ((...args) => args)(1, 2, 3) // [1, 2, 3]

  3. 箭头函数没有自己的new.target属性，如果它们存在，它们使用它们的封闭函数的new.target 。

    这与删除“神奇”引入的箭头函数值的其他更改一致。 如上所述，考虑到箭头function不能用于newfunction，这种特殊的变化尤其明显。

否则，箭头就像语义上的绑定函数一样。 箭头有可能更高效，因为它们不必携带额外的行李，因为它们不需要先从普通function转换，但它们在行为上完全一样。

有一些差异：

  • 箭头function不能构build。 虽然箭头函数和绑定函数都没有.prototype属性，但是前者在用new调用时抛出exception，而后者只是忽略绑定值并将其目标函数作为构造函数调用（部分应用了绑定参数，虽然）在新的实例。 

     function F() {} var f = () => {}, boundF = F.bind({}); console.log(new boundF(), new boundF instanceof F) // {}, true console.log(new f) // TypeError

  • 箭头函数确实有词法arguments ， new.target和super （不仅是词法上的）。 对箭头函数的调用不会初始化任何这些函数，它们只是从定义了箭头函数的函数inheritance而来。在绑定函数中，它们只是指向目标函数的相应值。

  • 箭头函数并不实际绑定this值。 相反，他们没有一个，当你使用它时，它会在词法范围内看起来像一个variables名。 这确实可以让你懒惰地定义一个箭头函数，而this还不可用： 

     class X extends Object { constructor() { var f = () => this, // works boundF = function(){ return this; }.bind(this); // ^^^^ ReferenceError super(); // initialises `this` console.log(f(), f() == this); // {}, true } } new X;

  • 箭头函数不能是生成器函数（尽pipe它们可以返回生成器）。 您可以在生成器函数上使用.bind() ，但是无法使用箭头函数来表示它。

这里有一个更细微的差别：

箭头函数可以在不使用'return'关键字的情况下返回一个函数，立即在=>之后省略{}括号。 

 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}
Interesting Posts