在 ES6 中定义函数的正确方法？

Question

我只是想知道如何正确编写 ES6 函数。我知道这取决于个人喜好，但有什么优缺点？

function foo() {
  ...
}

对比

const foo = () => {
  ...
};

对比

const foo = function () {
  ...
};

对比

const foo = function bar() {
  ...
};

airbnb风格指南推荐后者。但是为一个函数定义两个名称对我来说毫无意义。

Answer 1

第一个的优点是避免了相关的错误hoisting，所以你可以在函数声明之前使用它。

对于其他选项，您只能在声明之后使用它们，因为在那之前，它们是具有未定义值的变量（由于提升）。所以我会说第一个选项是最安全的。

Answer 2

使用函数声明意味着您将处理 function declaration hoisting，其中所有函数都在执行任何代码之前处理，因此您可以在技术上在定义它们之前使用它们，因为它们被提升到顶部，你不会有块作用域，因为它们是函数作用域：

foo(); //can be used before declaration appears!

function foo() {
  { //new block
    function bar() { 
      alert(1);
    }
  }
  bar(); //no problem, is function scoped
}
foo(); //alerts 1!

使用函数 expressions，将不会提升，如果您使用 let 或 const:

function foo() {
  { //new block
    const bar = () => { 
      alert(1);
    }
  }
  bar(); //ReferenceError: Can't find variable: bar
}
foo();

最后，使用 命名函数表达式 允许错误为函数提供命名，而不仅仅是匿名函数以便更好地调试。因此：更喜欢最后的选择。它具有预期的块作用域（它仍然具有提升但在代码中声明之前访问它是无效的），并且它允许更好的调试体验。

此外，不要忘记箭头函数不绑定它们自己的 this 而是采用封闭上下文的 this！在严格模式下，函数声明总是有一个 this 引用全局对象 window 或 undefined。

在 ES6 中定义函数的正确方法？

Proper way of defining functions in ES6?

javascript

function

ecmascript-6

arrow-functions

eslint-config-airbnb