在 IIFE 内部调用 function

Question

我有以下代码：

function doStuff() {
    var increaseNumber = 0;

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

    return doSomeStuff();
};

doStuff();

When function “doStuff” is executed, function “doSomeStuff”, which is inside function “doStuff”, gets triggered via “return doSomeStuff()” and increments variable “increaseNumber” by 1 each time it is called. 如果我改变“return doSomeStuff();” 到“return doSomeStuff;”，通过“doStuff()”调用“doStuff”不起作用，正如我所假设的那样。

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

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

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

    return doSomeStuff;
})();

doStuff();

在此代码中，IIFE 存储在变量“doStuff”中。 在 IIFE 内部，存储了 function “doSomeStuff”，显然是通过“return doSomeStuff”触发的，并且每次通过“doStuff()”调用变量“increaseNumber”时都会增加 1。 当我改变“return doSomeStuff;” 到“return doSomeStuff();”，代码不再按规定工作。

什么时候：

    return doSomeStuff();
})();

//doStuff();

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

这里主要有两件事我不明白：

1. 为什么当“return doSomeStuff;”时代码有效。 我看不出这是如何触发 function “doSomeStuff”的，因为缺少 ()。 当我调用 function 时，我确保添加 ()。 我就是这样学会的。
2. 最重要的是：当我更改“return doSomeStuff;”时，为什么不能将“doStuff”称为 function “返回 doSomeStuff();”？

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

感谢一百万的任何提示。

Answer 1

在此代码中，IIFE 存储在变量“doStuff”中

不，IIFE 立即运行，其返回值存储在doStuff中。 因此，如果您希望doStuff成为可以多次调用的 function，则需要返回 function。

为什么当“return doSomeStuff;”时代码有效。 我看不出这是如何触发 function “doSomeStuff”的，因为缺少 ()。

它不会触发 doSomeStuff，而不是单独触发。 IIFE 中的代码只是试图创建function，而不是实际运行它。 您调用 function 的位置是doStuff() ()

为什么当我更改“return doSomeStuff;”时不能将“doStuff”称为 function “返回 doSomeStuff();”？

因为在这种情况下，您的 IIFE 将返回一个数字，然后将该数字分配给doStuff 。

Answer 2

In Javascript functions are just like any other objects, we can return a function from another function, they can be passed as arguments to other functions etc.

当你return doSomeStuff; 您将返回 function。

当你return doSomeStuff(); 您正在返回通过调用 doSomeStuff function 返回的值。 它与

    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.

如上所述，您在这里返回 function ，它被存储到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(); 您不再返回 function ，而是返回doSomeStuff返回的值并存储到var doStuff 。 您只能对函数执行() ，因为doStuff不是 function 您不能执行doStuff()

Answer 3

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

Answer 4

下面是它的工作原理。

Q1（改写）：“为什么会这样？”

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

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

  return doSomeStuff;
})();

doStuff();

A1：让我们把它分解成简单的步骤。

1. 声明了变量doStuff 。
2. IIFE 运行，返回 function 声明doSomeStuff ，它被分配给变量doStuff 。
3. 由于变量doStuff现在包含 function，因此您可以像调用普通 function 一样调用它。

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

Q2（改写）：“为什么我不能将doStuff称为 function？”

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

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

  return doSomeStuff();
})();

doStuff();

A2：再一次，让我们分解它以更好地了解幕后发生的事情。

1. 声明了变量doStuff 。
2. 当 IIFE 运行时，调用doSomeStuff 。 由于doSomeStuff没有显式返回任何内容，因此 JavaScript 引擎假定它返回undefined 。 所以doStuff现在拥有一个undefined的值。
3. 由于undefined不是 function 并且因此不可调用，因此您将收到运行时错误uncaught TypeError: doStuff is not a function 。

希望能帮助到你。