ES6 箭头函数和使用 Function.prototype.bind 绑定的函数之间有什么区别(如果有)? [英] What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

问题描述

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

function () {返回这个；}.bind(this);() =>{返回这个；};

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

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

ES6 中的两种结构之间有什么区别吗?

解决方案

没有(显着的)差异.

好吧，那还为时过早.箭头函数有三个微小独特的区别.

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

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

   new (() => {})//类型错误:() =>{} 不是构造函数

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

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

   (() => arguments)(1, 2, 3)//ReferenceError: 参数未定义

   这个可能有点棘手.大概这是为了消除 JavaScript 的其他奇怪之处之一.arguments 对象是它自己的特殊的野兽，而且它的行为很奇怪，所以被扔掉也就不足为奇了.

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

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

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

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

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

It seems to me that, in ES6, the following two functions are very nearly identical:

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

() => {
  return this;
};

The end result seems the same: arrow functions produce a JavaScript function object with their this context bound to the same value as the this where they are created.

Obviously, in the general sense, Function.prototype.bind is more flexible than arrow functions: it can bind to values other than the local this, and it can bind any function's this at any point in time, potentially long after it is initially created. However, I'm not asking how bind itself is different from arrow functions, I'm asking how arrow functions differ from immediately calling bind with this.

Are there any differences between the two constructs in ES6?

解决方案

There are no (significant) differences.

Well, okay, that's a little premature. There are three tiny differences unique to arrow functions.

1. Arrow functions cannot be used with new.

   This means, of course, that they do not have a prototype property and cannot be used to create an object with the classically-inspired syntax.

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

   This is probably for the best, though—the way new works would not make much sense with bound functions.

2. Arrow functions do not have access to the special arguments object that ordinary JavaScript functions have access to.

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

   This one is probably a little bit more of a gotcha. Presumably this is to remove one of JavaScript's other oddities. The arguments object is its own special beast, and it has strange behavior, so it's not surprising that it was tossed.

   Instead, ES6 has splats that can accomplish the same thing without any magic hidden variables:

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

3. Arrow functions do not have their own new.target property, they use the new.target of their enclosing function, if it exists.

   This is consistent with the other changes to remove "magically" introduced values for arrow functions. This particular change is especially obvious, considering arrow functions can't be used with new anyway, as mentioned above.

Otherwise, arrows are just like bound functions, semantically. It's possible for arrows to be more performant, since they don't have to carry around the extra baggage and since they don't need to be converted from ordinary functions first, but they're behaviorally exactly the same.

这篇关于ES6 箭头函数和使用 Function.prototype.bind 绑定的函数之间有什么区别(如果有)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！