在 IIFE 中调用函数

Question

我有以下代码：

function doStuff() {
    var increaseNumber = 0;

    function doSomeStuff() {
        console.log(++increaseNumber);
    }

    return doSomeStuff();
};

doStuff();

当执行函数“doStuff”时，函数“doSomeStuff”在函数“doStuff”中，通过“returndoSomeStuff()”触发，每次执行时变量“increaseNumber”加1叫做。如果我改变“return doSomeStuff();”到“return doSomeStuff;”，通过“doStuff()”调用“doStuff”是行不通的，正如我所假设的那样。

此外，我有以下代码，它产生与前面代码相同的结果：

var doStuff = (function () {
    var increaseNumber = 0;

    function doSomeStuff() {
        console.log(++increaseNumber);
    }

    return doSomeStuff;
})();

doStuff();

在此代码中，IIFE 存储在变量“doStuff”中。在 IIFE 内部，函数“doSomeStuff”被存储并显然通过“return doSomeStuff”被触发，并且每次通过“doStuff()”调用它时变量“increaseNumber”增加 1。 当我改变“return doSomeStuff;”到“return doSomeStuff();”，代码不再按布局工作。

时间：

    return doSomeStuff();
})();

//doStuff();

IIFE 和“doSomeStuff”执行一次并且 increaseNumber = 1。通过“doStuff()”再次调用 IIFE 不起作用，因为错误：“JavaScript error: doStuff is不是函数。

这里主要有两点不明白：

为什么代码在“return doSomeStuff;”时有效。我看不出这是如何触发函数“doSomeStuff”的，因为缺少 ()。当我调用函数时，我确保添加 ()。我就是这样学的。
最重要的是：当我更改“return doSomeStuff;”时，为什么我不能将“doStuff”作为函数调用到“return doSomeStuff();”?

你会发现我还是一个 Javascript 新手。我希望我没有在这里重复一个问题（老实说，我无法通过搜索或 Google 找到任何可以回答我查询的内容）。

非常感谢任何提示。

Answer 1

在 Javascript 中，函数就像任何其他对象一样，我们可以 return 一个函数来自另一个函数，它们可以作为参数传递给其他函数等。

当您 return doSomeStuff; 时，您正在 return 使用该功能。

当您 return doSomeStuff(); 时，您正在 return 通过调用 doSomeStuff 函数编辑值 return。与

相同

    var result = doSomeStuff();
    return result;

现在回答问题。

1. Why does the code work when “return doSomeStuff;”. I don’t see how this triggers function “doSomeStuff”, as the () is missing. When I call a function, I make sure to add (). That’s how I learned it.

如上所述，您在此处 return 调用函数，它存储到 var doStuff。当您执行 doStuff()

时它会被执行

2. ABOVE EVERYTHING: Why can I not call “doStuff” as a function when I change “return doSomeStuff;” to “return doSomeStuff();”?

如果更改为 return doSomeStuff();，则不再 return 函数，而是 return 由 doSomeStuff 函数编辑的值 return并存储到 var doStuff。你只能在函数上做 ()，因为 doStuff 不是你不能做的函数 doStuff()

Answer 2

In this code, an IIFE is stored inside variable “doStuff”

不是，IIFE马上就是运行，它的return值存入了doStuff。所以想要doStuff是一个可以多次调用的函数，就需要return一个函数。

Why does the code work when “return doSomeStuff;”. I don’t see how this triggers function “doSomeStuff”, as the () is missing.

它不会触发 doSomeStuff，不会自行触发。 IIFE 中的代码只是试图创建函数，而不是运行它。调用函数的地方是doStuff()末尾的()。

Why can I not call “doStuff” as a function when I change “return doSomeStuff;” to “return doSomeStuff();”?

因为在那种情况下，您的 IIFE 正在 returning 一个数字，然后该数字被分配给 doStuff。

Answer 3

在 JavaScript return func(); return 中 return 由 func() 编辑的值。另一方面，return func; return 是 function，它本身 return 是由 function func 编辑的值 return。两者是两种不同的东西。 return func returns 一个函数对象。在 javascript 中，函数被视为对象。 return func 将 return 可调用函数对象。返回 func() returns 由可调用函数编辑的值 return。

Answer 4

这是它的工作原理。

Q1（改写）："Why does this work?"

var doStuff = (function () {
  var increaseNumber = 0;

  function doSomeStuff() {
    console.log(++increaseNumber);
  }

  return doSomeStuff;
})();

doStuff();

A1：让我们将其分解为简单的步骤。

声明变量doStuff。
IIFE 运行，returning 函数声明 doSomeStuff，它被分配给变量 doStuff。
由于变量 doStuff 现在包含一个函数，您可以像调用普通函数一样调用它。

请注意，一旦 IIFE 完成，变量 increaseNumber 仍包含在其内部范围内，并且可供函数 doSomeStuff 访问。在现在分配给 doStuff 的 doSomeStuff 的生命周期内，这个内部范围不会被销毁；这就是为什么调用 doStuff() 会产生预期的效果，即每次执行函数时 console.log 都会输出一个数字增量。

Q2（改写）："Why can't I call doStuff as a function?"

var doStuff = (function () {
  var increaseNumber = 0;

  function doSomeStuff() {
    console.log(++increaseNumber);
  }

  return doSomeStuff();
})();

doStuff();

A2：再次，让我们对其进行分解，以更好地理解幕后发生的事情。

声明变量doStuff。
当 IIFE 运行时，调用函数 doSomeStuff。由于 doSomeStuff 没有明确地 return 任何东西，JavaScript 引擎假定它 returns undefined。所以 doStuff 现在的值为 undefined.
由于 undefined 不是函数，因此不可调用，您将收到运行时错误 uncaught TypeError: doStuff is not a function。

希望对您有所帮助。

在 IIFE 中调用函数

Calling function inside IIFE

javascript

iife