javascript - 函数 foo(){} 和 foo = function(){} 有什么区别？

Question

这个问题在这里已经有了答案:




8年前关闭。

Possible Duplicate:
JavaScript: var functionName = function() {} vs function functionName() {}

他们是一样的吗？我一直想知道

Answer 1

不，它们并不相同，尽管它们都产生了一个函数，您可以通过符号 foo 调用它。 .一个是函数声明，另一个是函数表达式。它们在不同的时间进行评估，对它们定义的范围有不同的影响，并且在不同的地方是合法的。

报价my answer to this other question在这里(为了相关性进行了一些编辑)，以防其他问题因某种原因被删除(并保存链接后的人们):

JavaScript 有两个不同但相关的东西:函数声明和函数表达式。它们之间存在显着差异:

这是一个函数声明:

function foo() {
    // ...
}

在执行任何分步代码之前，函数声明在进入封闭范围时进行评估。函数的名称 ( foo ) 被添加到封闭的作用域中(从技术上讲，函数在其中定义的执行上下文的变量对象)。

这是一个函数表达式(特别是一个匿名的，就像你引用的代码一样):

var foo = function() {
    // ...
};

函数表达式作为分步代码的一部分在它们出现的地方进行评估(就像任何其他表达式一样)。该函数创建了一个没有名称的函数，并将其分配给 foo多变的。

函数表达式也可以命名而不是匿名。一个命名的看起来像这样:

var x = function foo() {  // Valid, but don't do it; see details below 
    // ...
};

根据规范，命名函数表达式应该是有效的。它应该创建一个名为 foo 的函数，但不放 foo在封闭范围内，然后将该函数分配给 x变量(所有这些都发生在分步代码中遇到表达式时)。当我说它不应该放 foo在封闭范围内，我的意思是:

var x = function foo() {
    alert(typeof foo); // alerts "function" (in compliant implementations)
};
alert(typeof foo);     // alerts "undefined" (in compliant implementations)

请注意这与函数声明的工作方式有何不同(函数名称 是 添加到封闭范围内)。

命名函数表达式适用于兼容的实现，但在野外实现中曾经存在一些错误，尤其是 Internet Explorer 8 及更早版本(以及一些早期版本的 Safari)。 IE8 两次处理命名函数表达式:首先作为函数声明(进入执行上下文时)，然后作为函数表达式，在进程中生成两个不同的函数。 (真的。)

更多信息: Double take在这里: Named function expressions demystified

注意:下面是在 2011 年编写的。 2015 年，控制块中的函数声明作为 ECMAScript 2015 的一部分添加到语言中。它们的语义取决于您是处于严格模式还是松散模式，如果环境是松散模式，则是松散模式网页浏览器。当然，关于您使用的环境是否正确支持 ES2015 定义。 (令我惊讶的是，在 2017 年 7 月撰写本文时， Babel 也没有正确转译它们。)因此，您只能在特定情况下可靠地在控制流结构中使用函数声明，因此它仍然可能是最好的，现在，改为使用函数表达式。

最后，它们之间的另一个区别是它们的合法性。函数表达式可以出现在表达式可以出现的任何地方(实际上是任何地方)。函数声明只能出现在其封闭范围的顶层，在任何控制流语句之外。例如，这是有效的:

function bar(x) {
    var foo;

    if (x) {
        foo = function() {  // Function expression...
            // Do X
        };
    }
    else {
        foo = function() {  // ...and therefore legal
            // Do Y
        };
    }
    foo();
}

...但这不是，而且 不在大多数实现中做它看起来像的事情:

function bar(x) {

    if (x) {
        function foo() {  // Function declaration -- INVALID
            // Do X
        }
    }
    else {
        function foo() {  // INVALID
            // Do Y
        }
    }
    foo();
}

这很有意义:因为 foo函数声明在进入 bar 时被评估函数，在执行任何一步一步的代码之前，解释器不知道是哪个 foo评估。这对表达式来说不是问题，因为它们是在控制流期间完成的。

由于语法无效，实现可以自由地做他们想做的事。我从未遇到过按照我的预期执行的操作，即抛出语法错误并失败。相反，几乎所有人都忽略了控制流语句，并在有两个 foo 时做他们应该做的事情。顶层的函数声明(使用第二个；在规范中)。所以只有第二个 foo用来。 Firefox 的 SpiderMonkey 是最突出的，它似乎(有效地)将它们转换为表达式，所以它使用的取决于 x 的值。 . Live example .