javascript - "function incrementNumber()"括起来的括号是可选的吗？

Question

我是 JavaScript 新手，正在尝试学习 JavaScript 闭包。我有相同代码的两个版本，唯一的区别是版本 2 有括号将函数括起来。我已经运行了两个版本，它们似乎产生了相同的结果。我想知道“functionincrementNumber()”后面的括号是否是可选的？

版本 1:

var incrementFunctionVariable = function incrementNumber(){
    var clickCount = 0;
    return function (){
        return ++clickCount;
    }
}()

版本 2:用括号括住“functionincrementNumber()”

var incrementFunctionVariable = (function incrementNumber(){
    var clickCount = 0;
    return function (){
        return ++clickCount;
    }
})()

<input type="button" value="click me" onclick="alert(incrementFunctionVariable())" /><br>

Answer 1

这与 JavaScript plus sign in front of function name 非常相似，但也许不完全重复。

在这种特殊情况下，您不需要所引用的括号，但在其他一些情况下则需要。

在 JavaScript 中，如果解析器需要语句或声明，并且它看到 function关键字，它假设它是一个函数声明(或者在 ES2015 中，一个函数语句)。这些不是表达式(尽管在 JavaScript 中，表达式在需要语句/声明的情况下是有效的)。函数声明/语句不会产生可立即在代码中使用的值。

但是如果解析器需要一个表达式(例如，在 = 的右侧)， function启动一个函数表达式。函数表达式确实会产生一个可以在代码中立即使用的值(对函数的引用)。

您看到()的原因围绕函数表达式的一点是，人们习惯在立即调用函数时编写它们:

// WON'T WORK
function() { alert("foo"); }();

// Works
(function() { alert("foo"); }());

// Works
(function() { alert("foo"); })();

他们这样做是为了将解析器的状态从期望语句/声明更改为期望表达式，以便 function启动一个函数表达式，因此有一个结果值，然后他们可以使用该值通过 () 调用该函数.

您不需要在示例中执行此操作，因为在 = 之后，解析器已经期待一个表达式。尽管没有必要，但通常都会这样做，也许是因为在()之后真的很容易阅读。在最后。也就是说，这个:

var foo = function foo() {
    // lots of stuff here
};

还有这个

var foo = function foo() {
    // lots of stuff here
}();

真的很容易混淆。添加()到后者使它们不太相似:

var foo = (function foo() {
    // lots of stuff here
})();

但这没有必要，如果人们这样做，那就是习惯和/或风格。