javascript - 请解释一下这个 Javascript 闭包练习

Question

这个问题已经有答案了:

How do JavaScript closures work? (86 个回答)

已关闭 9 年前。

我是一个 javascript 菜鸟，正在尝试理解下面的闭包练习。

现在，我知道结果是 122。任何人都可以引导我一步步完成这个过程(什么被传递到什么)，以便我能够理解闭包是如何工作的？

var hidden = mystery(3);
var jumble = mystery3(hidden);
var result = jumble(2);

function mystery ( input ){
  var secret = 4;
  input+=2;
  function mystery2 ( multiplier ) { 
    multiplier *= input;
    return secret * multiplier;
  }
  return mystery2;
}
function mystery3 ( param ){
  function mystery4 ( bonus ){
    return param(6) + bonus;
  }
  return mystery4;
}

Answer 1

为了理解这一点，您必须知道函数调用和函数引用之间的区别。以及作用域在 javascript 中的工作原理。

假设您确实知道这些事情，让我们开始解释。

因此，您首先有一个变量 hidden，它的值是 mystery(3)。因此，立即查看函数 mystery 并查看它返回的内容。它返回对内部函数mystery2的引用。所以现在 hidden 拥有一个引用，这意味着它没有实际的数值。接下来是第二个变量声明
var jumble = mymy3(隐藏);.现在，为了了解 jumble 包含什么内容，您需要查看函数 mystery3 及其返回的值。它再次返回对内部函数 mystery4 的引用。因此，现在您拥有的两个变量包含对闭包 mystery 和 mystery3 的内部函数的引用。

现在让我们看一下 var result = jumble(2)。执行 jumble(2) 是对 jumble 持有引用的函数的实际函数调用，该函数是 mystery4。当 mystery4 运行时，您会看到它需要一个参数 bonus，该参数将是 2 从行 var result = jumble(2) 给出。它返回param(6) + Bonus。 bonus 是 2，好的，但是 param(6) 是什么？这是赋予 jumble: hidden 的值，它是对 mystery2 的引用，还记得吗？因此运行 param(6) 将执行带有参数 6

的 mystery2

因此，追溯函数可能会有点令人困惑，但让我们用实际值来跟踪它，以使其更清晰(如果这只是一个单词的话)。

执行var result = jumble(2)将为我们提供返回值param(6) + 2以获取param(6) 我们进入 mystery2 并设置 multiplier = 6，其中设置 multiplier = 6 * input。我们的输入等于 3+2=5，因此 multiplier 变为 6*5=30，作为返回值，我们将其乘以 4 这是我们的var secret 。在 mystery2 执行结束时，我们得到了 120 的值，该值返回到 mystery4 中的 param(6) 。如果您还记得我们的奖金是2，那么120+2=122瞧!

我感觉我没有很好地解释这一点，但这可能是我能做的最好的了。希望有帮助!