总结

你能解释一下在JavaScript中封装匿名函数的语法背后的原因吗?为什么这样工作:(function(){})();但这不是:function(){}();?


我所知道的

在JavaScript中,像这样创建一个命名函数:

function twoPlusTwo(){
    alert(2 + 2);
}
twoPlusTwo();

你也可以创建一个匿名函数并将其赋值给一个变量:

var twoPlusTwo = function(){
    alert(2 + 2);
};
twoPlusTwo();

你可以通过创建一个匿名函数来封装一个代码块,然后将它包装在括号中并立即执行:

(function(){
    alert(2 + 2);
})();

这在创建模块化脚本时非常有用,可以避免由于潜在的冲突变量而使当前作用域或全局作用域混乱——就像Greasemonkey脚本、jQuery插件等情况一样。

现在,我明白为什么这是可行的了。括号将内容括起来,只公开结果(我相信有更好的方式来描述它),例如(2 + 2)=== 4。


我不明白

但我不明白为什么这不能同样有效:

function(){
    alert(2 + 2);
}();

你能给我解释一下吗?


当前回答

也许简短的回答是这样的

function() { alert( 2 + 2 ); }

是定义(匿名)函数的函数字面量。附加的()-对被解释为表达式,不需要在顶层,只需要字面量。

(function() { alert( 2 + 2 ); })();

在调用匿名函数的表达式语句中。

其他回答

在javascript中,这称为立即调用函数表达式(IIFE)。

为了使它成为一个函数表达式,你必须:

使用()将其括起来 在它前面放置一个void操作符 将它赋值给一个变量。

否则,它将被视为函数定义,然后你将无法通过以下方式同时调用/调用它:

 function (arg1) { console.log(arg1) }(); 

上面会给出错误。因为您只能立即调用函数表达式。

这可以通过以下几种方式实现: 方式1:

(function(arg1, arg2){
//some code
})(var1, var2);

方式2:

(function(arg1, arg2){
//some code
}(var1, var2));

方式3:

void function(arg1, arg2){
//some code
}(var1, var2);

方法4:

  var ll = function (arg1, arg2) {
      console.log(arg1, arg2);
  }(var1, var2);

以上所有操作都将立即调用函数表达式。

它们可以与参数一起使用

var x = 3; 
var y = 4;

(function(a,b){alert(a + b)})(x,y)

结果是7

也许简短的回答是这样的

function() { alert( 2 + 2 ); }

是定义(匿名)函数的函数字面量。附加的()-对被解释为表达式,不需要在顶层,只需要字面量。

(function() { alert( 2 + 2 ); })();

在调用匿名函数的表达式语句中。

它不能工作,因为它被解析为FunctionDeclaration,并且函数声明的名称标识符是强制性的。

当你用圆括号包围它时,它被计算为一个FunctionExpression,函数表达式可以命名也可以不命名。

FunctionDeclaration的语法是这样的:

function Identifier ( FormalParameterListopt ) { FunctionBody }

和FunctionExpressions:

function Identifieropt ( FormalParameterListopt ) { FunctionBody }

正如你所看到的,FunctionExpression中的Identifier (Identifieropt)令牌是可选的,因此我们可以有一个没有定义名称的函数表达式:

(function () {
    alert(2 + 2);
}());

或命名函数表达式:

(function foo() {
    alert(2 + 2);
}());

圆括号(正式称为分组操作符)只能包围表达式,函数表达式被求值。

这两个语法结果可以是模棱两可的,它们可以看起来完全相同,例如:

function foo () {} // FunctionDeclaration

0,function foo () {} // FunctionExpression

解析器知道它是FunctionDeclaration还是FunctionExpression,这取决于它出现的上下文。

在上面的例子中,第二个是一个表达式,因为逗号操作符也只能处理表达式。

另一方面,FunctionDeclarations实际上只能出现在所谓的“程序”代码中,即全局作用域之外的代码,以及其他函数的FunctionBody内部的代码。

应该避免使用块中的函数,因为它们会导致不可预测的行为,例如:

If (true) { 函数foo() { alert('真的'); } }其他{ 函数foo() { alert('假! '); } } foo ();/ /真的吗?假的?为什么?

上面的代码实际上应该产生一个SyntaxError,因为Block只能包含语句(ECMAScript规范没有定义任何函数语句),但大多数实现都是容忍的,并且只接受第二个函数,即警告“false!”的函数。

Mozilla的实现——rhino、SpiderMonkey——有不同的行为。它们的语法包含一个非标准的Function Statement,这意味着函数将在运行时计算,而不是在解析时计算,就像FunctionDeclarations一样。在这些实现中,我们将得到定义的第一个函数。


函数可以用不同的方式声明,比较以下几种:

用function构造函数定义的函数赋值给变量multiply:

var multiply = new Function("x", "y", "return x * y;");

2-一个名为multiply函数的函数声明:

function multiply(x, y) {
    return x * y;
}

赋值给变量multiply的函数表达式:

var multiply = function (x, y) {
    return x * y;
};

一个命名函数表达式func_name,赋值给变量multiply:

var multiply = function func_name(x, y) {
    return x * y;
};

很棒的答案已经被贴出来了。但我想指出,函数声明返回一个空的完成记录:

14.1.20 -运行时语义:评估 function BindingIdentifier (FormalParameters) {FunctionBody} 返回NormalCompletion(空的)。

这个事实不容易观察到,因为大多数试图获取返回值的方法都会将函数声明转换为函数表达式。然而,eval显示它:

Var r = eval("函数f(){}"); console.log (r);/ /定义

调用空的完成记录是没有意义的。这就是函数f(){}()不能工作的原因。事实上,JS引擎甚至不会尝试调用它,括号被认为是另一条语句的一部分。

但是如果你把函数括在括号里,它就变成了一个函数表达式:

Var r = eval("(函数f(){})"); console.log (r);//函数f(){}

函数表达式返回一个函数对象。因此你可以调用它:(function f(){})()。