有人可以帮我理解这段代码吗?为什么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");
为什么要使用第一个例子?为什么要将匿名函数放在括号中?
答案 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;
正确输出:
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不在其范围之外。
(function notify(){
console.log('hello');
})()
notify()
&#13;