Javascript IIFE：如果我返回警报而不将其包装到函数中，为什么我的代码会忽略addEventListener？

我不明白为什么我必须将警报包装在函数中，以避免代码忽略事件侦听器

如果我运行此代码，它将正常工作，我将能够单击并在单击后显示警报

    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(numCopy) {
  return alert(numCopy);
}

var bar = foo(num);
elem.addEventListener('click', bar);

此处传递给

baz

的值是多少？仍然

42

我们是将返回值赋给一个变量还是直接将其传递给另一个函数都没有区别

现在让我们内联函数定义：

function foo(numCopy) {
  return alert(numCopy);
}

elem.addEventListener('click', foo(num));

现在我们有了一个生活。此处传递给

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

）。该函数执行

警报

，因此您可以立即看到警报

foo

返回

alert

（分配给

bar）

的返回值，因此您要将该值传递给

addEventListener

但是

alert

返回

undefined

，而

addEventListener

希望传递一个函数

---

这就是为什么你的iLife需要返回一个函数。

让我们看看下面的例子，看看发生了什么：

function foo(x) {
  return x;
}

var bar = foo(42);
baz(bar);

传递给

baz

的值是多少

42

因为

foo

只返回传递给它的值

现在让我们内联函数调用：

function foo(numCopy) {
  return alert(numCopy);
}

var bar = foo(num);
elem.addEventListener('click', bar);

此处传递给

baz

的值是多少？仍然

42

我们是将返回值赋给一个变量还是直接将其传递给另一个函数都没有区别

现在让我们内联函数定义：

function foo(numCopy) {
  return alert(numCopy);
}

elem.addEventListener('click', foo(num));

现在我们有了一个生活。此处传递给

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

）。该函数执行

警报

，因此您可以立即看到警报

foo

返回

alert

（分配给

bar）

的返回值，因此您要将该值传递给

addEventListener

但是

alert

返回

undefined

，而

addEventListener

希望传递一个函数

---

这就是为什么你的iLife需要返回一个函数。

这是一个函数，所以

）（num）

之后它会立即调用函数。您必须返回一个调用

警报的函数，而不是
警报
调用它自己。嗯，这是一个函数，因此
）（num）
之后它将立即调用该函数。您必须返回调用
警报
的函数，而不是
警报
调用本身