Question

我只是想知道如何正确编写ES6功能。我知道这取决于个人喜好，但有哪些优点和缺点？

function foo() {
  ...
}

VS

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

VS

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

VS

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

airbnb风格指南推荐后者。但是我为一个函数定义两个名称是没有意义的。

Answer 1

使用函数声明意味着您将处理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!

使用函数表达式，如果您使用let或const，则不会提升，您将拥有块范围：

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

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

另外，不要忘记箭头函数不会绑定自己的this，而是使用封闭上下文的this！函数声明始终以this引用严格模式下的全局对象window或undefined。

Answer 2

第一个优点是避免与hoisting相关的错误，因此您可以在声明之前使用该函数。

使用其他选项，您只能在声明之后使用它们，因为在此之前。所以我想说第一种选择是最安全的选择。

在ES6中定义功能的正确方法？

2 个答案: