javascript - 有人可以解释这个 javascript 闭包是如何工作的吗？

Question

好的，我开始学习闭包是如何工作的......我已经在这个问题上停留了几个小时。我只是不明白它是如何工作的。

我必须找到变量 result 的最终值。

    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;
    }

答案是 122，但我不确定这个数字是多少。

我计算出来的答案是362，显然是错误的。

我得到了这样的362

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

function mystery ( input ){  //used 3 as an input
  var secret = 4;
  input+=2;
  function mystery2 ( multiplier ) { //used 3 as multiplier
     multiplier *= input; // 3 * 5
     return secret * multiplier;
  }
  return mystery2;   //returned 60
}


function mystery3 ( param ){  //used 60 as param
  function mystery4 ( bonus ){ //used 2 as bonus
    return param(6) + bonus; //60(6) + 2
  }
  return mystery4; // answer is 362
}

谁能告诉我你如何准确得到答案 122？

Answer 1

简单来说，闭包意味着超出范围的局部变量的值保留在函数内。

让我们逐步查看您的代码:

var hidden = mystery(3);

现在，mystery 返回一个函数。但它实际上返回了什么。一个简单的 alert(hidden) 语句会告诉你它返回了，

function mystery2( multiplier ) {
    multiplier *= input;
    return secret * multiplier;
}

现在，如果您查看此函数的局部变量的值，

• multiplier 是一个参数，它的值将是调用时传递给它的任何值
• 但是 input 的值是多少？
• 和 secret ？

这就是闭包发挥作用的地方。 input 的值将从创建此函数的范围中获取。创建此函数时，input 和 secret 的值是多少？我们再来看看谜底:

function mystery ( input ){ // value 3 is passed here as a parameter
    var secret = 4;
    input+=2;
    ...
}

所以我们发现 input 实际上有值 5，而 secret 有值 4 .现在返回的函数基本上等同于:

function mystery2( multiplier ) {
    multiplier *= 5;
    return 4 * multiplier;
    // for future use, let's say that above statement is equivalent to:
    // return 4 * (multiplier * 5);                               ----- (1)
    // (now be a good boy/girl and don't scroll down to end)
}

好的，下一步:

var jumble = mystery3(hidden);

同样，mystery3 返回一个函数。 alert(jumble) 给了我们这个:

function mystery4( bonus ){
    return param(6) + bonus;
}

再次，以与之前相同的方式思考，我们可以说这等同于:

function mystery4( bonus ){
    return mystery2(6) + bonus; // param <- hidden <- mistery2
} //                                                             ----- (2)

最后，

var result = jumble(2);

相当于:

var result = mystery4(2);

也就是说，

var result = mystery2(6) + 2; // because (2), see above

也就是

var result = 4 * (6 * 5) + 2; // because (1), see above

呼...

122