javascript - 如何在 ES2015 中编写命名箭头函数？

Question

我有一个函数，我正在尝试将其转换为 ES6 中的新箭头语法。它是一个命名函数:

function sayHello(name) {
    console.log(name + ' says hello');
}

有没有办法给它一个不带var语句的名字:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

显然，我只有在定义了这个函数之后才能使用它。类似于以下内容:

sayHello = (name) => {
        console.log(name + ' says hello');
    }

ES6 中是否有新的方法可以做到这一点？

Answer 1

How do I write a named arrow function in ES2015?

您按照您在问题中排除的方式进行操作:您将其放在赋值或属性初始化程序的右侧，其中变量或属性名称可以合理地用作 JavaScript 引擎的名称。没有其他方法可以做到这一点，但这样做是正确的，并且完全被规范所涵盖。

根据规范，这个函数有一个真实的名字，sayHello:

var sayHello = name => {
    console.log(name + ' says hello');
};

目前在 Assignment Operators > Runtime Semantics: Evaluation 中定义它在哪里做摘要 NamedEvalution操作(当前步骤 1.c.i)。 (您可以通过将鼠标悬停在标题中的 NamedEvalution 上并单击“引用”来查看适用的任何地方。)(以前，在 ES2019 之前，Assignment Operators > Runtime Semantics: Evaluation 使用了 the abstract SetFunctionName operation，步骤 1.e.iii，但在 ES2019 之后规范抽象已替换为 NamedEvalution。)

类似地，PropertyDefinitionEvaluation使用 NamedEvalution 并因此给这个函数一个真实的名字:

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

现代引擎已经为这样的语句设置了函数的内部名称。

例如，在 Chrome、Edge(基于 Chromium，v79 及更高版本)或 Firefox 中，打开 Web 控制台，然后运行以下代码段:

"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
    foo();
} catch (e) {
    console.log(e.stack);
}

在 Chrome 51 及更高版本和 Firefox 53 及更高版本(以及带有实验标志的“旧版”Edge 13 及更高版本，或“Chromium”Edge 79 及更高版本)上，当您运行它时，您会看到:

foo.name is: fooError    at foo (http://stacksnippets.net/js:14:23)    at http://stacksnippets.net/js:17:3

Note the foo.name is: foo and Error...at foo.

On Chrome 50 and earlier, Firefox 52 and earlier, and Legacy Edge without the experimental flag, you'll see this instead because they don't have the Function#name property (yet):

foo.name is: Error    at foo (http://stacksnippets.net/js:14:23)    at http://stacksnippets.net/js:17:3

Note that the name is missing from foo.name is:, but it is shown in the stack trace. It's just that actually implementing the name property on the function was lower priority than some other ES2015 features; Chrome and Firefox have it now; Edge has it behind a flag, presumably it won't be behind the flag a lot longer.

Obviously, I can only use this function after I have defined it

Correct. There is no function declaration syntax for arrow functions, only function expression syntax, and there's no arrow equivalent to the name in an old-style named function expression (var f = function foo() { };). So there's no equivalent to:

console.log(function fact(n) {
    if (n < 0) {
        throw new Error("Not defined for negative numbers");
    }
    return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120

你必须把它分成两个表达式(我认为你应该这样做):

const fact = n => {
    if (n < 0) {
        throw new Error("Not defined for negative numbers.");
    }
    return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));

当然，如果你有把它放在需要单个表达式的地方，你总是可以...使用箭头函数:

console.log((() => {
    const fact = n => {
        if (n < 0) {
            throw new Error("Not defined for negative numbers.");
        }
        return n == 0 ? 1 : n * fact(n - 1);
    };
    return fact(5);
})()); // 120

我并不是说这很漂亮，但如果你绝对肯定需要一个表达式包装器，它就可以工作。

---

旁注:如果您不希望函数从您分配的标识符中获取其名称怎么办？那，假设您不希望 example.name 在此处成为 "example"？

const example = () => {};
console.log(example.name); // "example"

您可以通过使用任何不使用 NamedEvaluation 的表达式来避免它。做这种事情最流行的方法可能是逗号运算符:

const example = (0, () => {});
//              ^^^−−−−−−−−−^
console.log(example.name); // ""

0 可以是你想要的任何东西，它被评估然后丢弃，所以 0 是一个流行的选择。通过逗号运算符传递函数会破坏赋值和函数表达式之间的直接链接，从而阻止 NamedEvaluation 为函数提供名称 example。 (这类似于逗号运算符的其他著名用法，例如 (0, object.example)() 调用 object.example without使 object 在调用中成为 this 的值，或者 (0, eval)("code") 执行 eval ，但不像通常那样在当前范围内。)

(感谢 Sebastian Simon 在评论中提出这一点。)