为什么返回这个ECMAScript Harmony箭头函数表达式会产生意想不到的行为?

Why does returning this ECMAScript Harmony arrow function expression produce unexpected behavior?

本文关键字：意想不到 表达式 函数 返回 ECMAScript Harmony 为什么      更新时间：2023-09-26

我一直在玩ECMAScript 6的新特性，这个问题与箭头函数有关。下面的代码是分配给Function对象原型的一个简单的函数组合方法。使用简单的匿名函数可以很好地工作，但使用箭头函数就不行。

Function.prototype.compose = function (bar) {
    var foo = this;
    return function () {
        return foo(bar.apply(null, arguments));
    };
};
var addFive = function (baz) {
    return baz + 5;
};
var addTen = function (hello) {
    return hello + 10;
};
var addFifteen = addFive.compose(addTen);
console.log(addFifteen(10));
http://jsfiddle.net/oegonbmn/

Function.prototype.compose = function (bar) {
    var foo = this;
    return () => foo(bar.apply(null, arguments));
};
var addFive = function (baz) {
    return baz + 5;
};
var addTen = function (hello) {
    return hello + 10;
};
var addFifteen = addFive.compose(addTen);
console.log(addFifteen(10));
http://www.es6fiddle.com/hyo32b2p/

第一个将25正确地记录到控制台，而第二个记录功能(hello) { return hello + 10; }105，这并不能确切地告诉我我做错了什么。

我没有返回箭头函数中的值，因为它应该隐式返回最后一个语句(在这个实例中的第一个和最后一个)，我认为手头的问题可能与词法作用域和this的值有关。有人能解释一下吗?

this和arguments都没有(重新)绑定在箭头函数中，而是在词法范围内。也就是说，您将获得它们在周围作用域中绑定的任何内容。

在ES6中，无论如何都不赞成使用arguments。首选的解决方案是使用rest参数:

Function.prototype.compose = function (bar) {
  return (...args) => this(bar.apply(null, args));
};

或者，实际上是:

Function.prototype.compose = function (bar) {
  return (...args) => this(bar(...args));
};
相关文章：