我很困惑为什么我必须将我的警报包装在一个函数中以避免我的代码忽略事件侦听器。
如果我运行此代码，它将正常工作，我将能够单击并在单击后显示警报
elem.addEventListener('click', (function(numCopy) {
return function() {
alert(numCopy);
};
})(num));
但是，如果我运行此代码，它将忽略事件侦听器并在页面加载后立即显示警报
elem.addEventListener('click', (function(numCopy) {
return alert(numCopy);
})(num));
我可以忽略它并接受它的完成方式，但如果有人能解释这背后的逻辑，我将不胜感激，这样我就可以完全掌握这个概念，非常感谢。
让我们通过查看以下示例来了解发生了什么：
function foo(x) {
return x;
}
var bar = foo(42);
baz(bar);
传递给baz什么值？42因为foo简单地返回传递给它的值。
现在让我们内联函数调用：
function foo(x) {
return x;
}
baz(foo(42));
传递到baz这里的值是什么？尽管如此42，我们是否将返回值分配给变量或直接将其传递给另一个函数并没有区别。
现在让我们内联函数定义：
baz(function foo(x) { return x; }(42));
现在我们有一个IIFE。传递到baz这里的值是什么？还是42。我们实际上并没有改变代码在做什么，我们只是去掉了中间变量赋值（我们也可以foo从函数表达式中删除）。
这与您的代码有什么关系？让我们从您的代码向后工作。我们从：
elem.addEventListener('click', (function(numCopy) {
return alert(numCopy);
})(num));
让我们提取函数定义：
function foo(numCopy) {
return alert(numCopy);
}
elem.addEventListener('click', foo(num));
现在让我们提取函数调用：
function foo(numCopy) {
return alert(numCopy);
}
var bar = foo(num);
elem.addEventListener('click', bar);
你看到这里有什么问题了吗？您正在调用该函数（foo在本例中）。该函数会执行alert，这就是您立即看到警报的原因。
foo返回alert(分配给的返回值bar)，因此您将该值传递给addEventListener.
但是alert返回undefined而addEventListener期望传递一个函数。
这就是为什么你的 IIFE 需要返回一个函数。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句