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

IT技术 javascript ecmascript-6 arrow-functions function-binding
2021-01-13 04:09:21

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

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

() => {
  return this;
};

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

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

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

3个回答

没有(显着)差异。

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

  1. 箭头函数不能与new.

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

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

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

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

    (() => 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无论如何都不能使用,如上所述。

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

我不会说arguments因为“奇怪的行为”(无论如何都在严格模式下修复)被抛弃。相反,箭头函数可以访问其封闭函数的arguments对象,这与它们访问其this绑定和 的方式一致new.target
2021-03-30 04:09:21
@Bergi 即使在严格模式下,arguments也很奇怪:它仍然不是数组,因此 splat 仍然更有用和可预测。
2021-03-31 04:09:21
@AlexisKing,您绝对应该在答案中提及接受父上下文。
2021-04-10 04:09:21

有一些区别:

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

    function F() {}
    var f = () => {},
        boundF = F.bind({});
    console.log(new boundF(), new boundF instanceof F) // {}, true
    console.log(new f) // TypeError
    
  • 箭头功能确实有词汇argumentsnew.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()在生成器函数上使用,但无法使用箭头函数来表达这一点。

这是一个更细微的区别:

箭头函数可以在不使用 '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}
我认为这是一个很好的答案,特别是如果您不了解所有速记语法
2021-03-13 04:09:21
我不认为这是一个特别有用的答案。是的 - 可以省略大括号 - 这很方便,但这只是语法上的差异,而不是功能上的差异。
2021-03-25 04:09:21