为什么我不能返回箭头函数？

Question

我这里有一个稍微高级一点的函数。

虽然这个函数按预期工作：

var square = (a) => a * a;

var callAndLog = (func) => {
  return function () {
    var res = func.apply(undefined, arguments);
    console.log("Result is: " + res);
    return res;
  }
};

var squareAndLog = callAndLog(square);

squareAndLog(5);  // Result is 25

如果我返回一个箭头函数，它不起作用：

var square = (a) => a * a;
var callAndLog = (func) => {
  return (() => {
    var res = func.apply(undefined, arguments);
    console.log("Result is: " + res);
    return res;
  })
};
var squareAndLog = callAndLog(square);
squareAndLog(5); // Result is NaN

我知道箭头函数比较宽松，所以我在这里尝试在括号()中返回它。如果没有括号，它也无法工作。

- Sebastian

---

squareAndLog(5); // 结果为 NaN — 我无法重现这个问题。当我运行该代码时，它会抛出一个异常："ReferenceError: arguments is not defined"。 - Quentin

箭头函数不绑定参数，所以在你的第二个示例中，你没有应用你期望的。改用(...args) => ...。进一步了解详情请参见this和this。 - Ilja Everilä

Answer 1

来自MDN：

箭头函数表达式的语法比函数表达式更简短，不会绑定自己的this, arguments, super, 或者new.target。

箭头函数不会将arguments对象绑定到它们的主体中。你的函数依赖于arguments的使用，因此它不能作为箭头函数工作。

如上面的评论所建议的，你可以使用...args代替：

var square = (a) => a * a;
var callAndLog = (func) => {
  return (...args) => {
    var res = func.apply(undefined, args);
    console.log("Result is: " + res);
    return res;
  };
};
var squareAndLog = callAndLog(square);
squareAndLog(5); 

我知道箭头函数很宽松，所以我在这里尝试在括号()中返回它。

将箭头函数括在括号()中不会影响其行为。 在很少（如果有的话？）情况下，这种做法可能会产生影响。

- JLRishe

---

但是它不应该给出“ReferenceError”吗？还是这与浏览器有关？ - Andrew Li

如果OP的代码包含在其他非箭头函数中，则arguments将引用从调用该外部函数的任何时候开始的arguments对象。 - JLRishe

我理解，但是Quentin似乎有不同的看法。也许一些浏览器会有不同的处理方式？ - Andrew Li

@AndrewLi 我没有看到Quentin说上面的代码在最外层作用域中。他可能只是忘了提到这个细节。 - JLRishe

Answer 2

箭头函数没有arguments对象，相反你可以使用rest parameter syntax（...）来代替，如下所示：

var square = (a) => a * a;
var callAndLog = (func) => {
  return ((...args) => {
    var res = func.apply(undefined, args);
    console.log("Result is: " + res);
    return res;
  })
};
var squareAndLog = callAndLog(square);
squareAndLog(5);

- ibrahim mahrir