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

时间:2016-10-08 09:10:30

标签: javascript

有人可以帮我理解这段代码吗?为什么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");

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

这里值得注意的是:

    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声明变量。

答案 2 :(得分:0)

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

循环添加事件监听器:

输出错误:



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;
&#13;

正确输出:

&#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;
&#13;
&#13;

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

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

notify()
&#13;
&#13;
&#13;

参考: