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

Question

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

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

() => {
  return this;
};

最终结果似乎相同：箭头函数生成一个 JavaScript 函数对象，其this上下文绑定到与创建它们的this相同的值。

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

ES6 中的两个构造之间有什么区别吗？

Answer 1

没有（显着）差异。

嗯，好吧，这有点为时过早。 箭头函数有三个独特的细微差别。

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

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

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

   不过，这可能是最好的—— new作品的方式对绑定函数没有多大意义。

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

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

   这可能更像是一个陷阱。 大概这是为了消除 JavaScript 的其他奇怪之处之一。 arguments对象是它自己的特殊野兽，它的行为很奇怪，所以被扔掉也就不足为奇了。

   相反，ES6 有 splats 可以在没有任何神奇隐藏变量的情况下完成相同的事情：

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

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

   这与移除箭头函数的“神奇”引入值的其他更改一致。 这种特殊的变化特别明显，考虑到箭头函数无论如何都不能与new一起使用，如上所述。

否则，在语义上，箭头就像绑定函数。 箭头可能会更高效，因为它们不必携带额外的包袱，并且不需要先从普通函数转换而来，但它们在行为上完全相同。

Answer 2

有一些区别：

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

   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以及（不仅是词法this ）。 对箭头函数的调用不会初始化其中的任何一个，它们只是从定义箭头函数的函数继承而来。在绑定函数中，它们只引用目标函数的相应值。

• 箭头函数实际上并不绑定this值。 相反，他们没有一个，当你使用this它看起来像在词法范围变量名。 这确实允许，而你懒洋洋地定义箭头功能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;

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

Answer 3

这是一个更细微的区别：

箭头函数可以在不使用 '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}