何时以及为何使用这些不同的 Javascript 函数声明格式？ [复制]答案

【问题标题】：When and why to use these various Java Script function declaration formats? [duplicate]何时以及为何使用这些不同的 Javascript 函数声明格式？ [复制]
【发布时间】：2018-04-29 07:08:29
【问题描述】：

以下函数声明格式有什么区别？什么时候用哪个更正确？

从初学者的角度和高层次（非深度）的角度来看，它们三者的工作方式似乎相同 - 因此它会让人感到困惑并提出问题。

const counter1 = function(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

function counter2(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

const counter3 = (num) => {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

他们都看起来表现相同。

【问题讨论】：

与 1. 相比，3. 具有箭头函数提供的附加限制/功能：箭头函数没有自己的 @987654324 @、arguments、super 或 new.target。
总是使用 #2 来获得提升。它也是最短的。

标签： javascript node.js function-declaration

【解决方案1】：

实际上，您的三个示例之间存在很多差异。

因此，首先，在函数声明中使用 const 时必须小心。

counter1(5); // counter1 is undefined, this will fail
const counter1 = function(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

虽然该函数将被提升并可供使用（编辑：技术上 let 和 const 也被提升，但它们未初始化，因此在声明它们之前您无法访问它们，更多信息 here。

counter2(5); // works fine
function counter2(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

另请注意，const 禁止重新分配变量，因此您不能在后面说const counter1 = {}，而使用function 示例可以这样做。

就function(num) { 与(num) => { 之间的区别而言，在您的示例中没有区别。但也有一些不同...例如

const thisWillFail = () => {
    console.log(arguments.length);
};
const thisWorks = function() {
    console.log(arguments.length);
};

如果您不熟悉arguments 对象，可以查找信息here。

【讨论】：