Question

有人可以帮我理解这段代码吗？为什么anonymous function括号内？

(function(food) {    
     if (food === "cookies") {        
         alert("More please");
     } else if (food === "cake") {
         alert("Yum yum");
     } 
 })("cookies");

如果我在这样的变量中引用函数并删除括号，我可以理解正在调用函数传递cookies字符串。

 var foodFunc = function(food) {    
     if (food === "cookies") {        
         alert("More please");
     } else if (food === "cake") {
         alert("Yum yum");
     } 
 }

foodFunc("cookies");

为什么要使用第一个例子？为什么要将匿名函数放在括号中？

Answer 1

匿名函数必须在括号内，因此可以立即调用它。写function(){...}()不会起作用。使用匿名函数是有道理的，如果你只需要它一次，这可能就是这种情况。

Answer 2

这里值得注意的是：

    var food = function(food) {    
     if (food === "cookies") {        
         alert("More please");
     } else if (food === "cake") {
         alert("Yum yum");
     } 
}("cookies");

也不需要extra（），并且在这种情况下让foo成为调用-undefined的结果，因为函数没有返回任何东西 - 。

那是因为这是声明函数的本机javascript语法。

但是，当javascript编译器找到如下声明时：

function foo(){
    return 'bar';
}

它将其转换为：

var foo = function(){ return 'bar'; };

（也做了一些提升）。

但是如果你要声明IIFE之类的话：

function(){
    //do something
}()

然后编译器无法将其分配给变量。

你可以这样做：

function res(){
    console.log('res')
}()

并且期望res被声明为函数 - 被附加到window-以及它的执行。但这通常不是IIFE的理想行为，因此您不得不添加extra（）来告诉编译器不要将res保存为函数。因为，如果你希望res 声明和调用，你应该声明一个res函数然后调用它。 IIFE并不打算声明一个函数，但是，自

以来

function someFunc(){...}

告诉编译器将someFunc声明为具有已定义函数值的var，您需要额外的语法来防止IIFE声明变量。

Answer 3

在许多情况下，您可以使用IIFE。以下是一个这样的案例：

循环添加事件监听器：

输出错误：

＆＃13;

var els = document.getElementsByClassName("content");

for (var i = 0; i < els.length; i++) {
  els[i].addEventListener("click", function() {
    console.log(i);
  })
}

＆＃13;

.content {
  height: 50px;
  width: 50px;
  border: 1px solid gray;
  line-height: 50px;
  text-align: center
}

＆＃13;

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>

＆＃13;

正确输出：

＆＃13;

var els = document.getElementsByClassName("content");

for (var i = 0; i < els.length; i++) {
  (function(i) {
    els[i].addEventListener("click", function() {
      console.log(i);
    })
  })(i)
}

＆＃13;

.content {
  height: 50px;
  width: 50px;
  border: 1px solid gray;
  line-height: 50px;
  text-align: center
}

＆＃13;

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>

＆＃13;

另请注意，IIFE不在其范围之外。

＆＃13;

(function notify(){
  console.log('hello');
})()

notify()

＆＃13;

匿名函数，声明和表达式语法理解

3 个答案:

参考：