[英]Can someone explain how this javascript closure works?
Ok, I am staring to learn how closures work......and I have been stuck on this one for a few hours. 好的,我正盯着了解闭瓶的工作原理......我已经坚持了几个小时。 I just don't understand how it works.
我只是不明白它是如何工作的。
I have to find the final value for the variable 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;
}
The answer is 122, but I am not sure how that number. 答案是122,但我不确定这个数字是多少。
The answer that I calculated is is 362. That was obviously wrong. 我计算的答案是362.这显然是错误的。
I got 362 like this 我这样得了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
}
Can someone tell me how exactly you can get the answer 122? 有人能告诉我你究竟能得到答案122吗?
In simple words, closure means that a value of a local variable that has gone out of scope is retained inside a function. 简单来说,闭包意味着超出范围的局部变量的值保留在函数内。
Let's look at your code step by step: 让我们一步一步看看你的代码:
var hidden = mystery(3);
Now, mystery
returns a function. 现在,
mystery
回归一个功能。 But what does it actually return. 但它实际上又回归了什么呢。 A simple
alert(hidden)
statement will tell you that it returns, 一个简单的
alert(hidden)
语句会告诉你它返回,
function mystery2( multiplier ) {
multiplier *= input;
return secret * multiplier;
}
Now if you look at the values of the local variables of this function, 现在,如果你看一下这个函数的局部变量的值,
multiplier
is an argument, it's value will be whatever that is passed to it when it is called multiplier
是一个参数,它的值将是调用它时传递给它的任何值 input
? input
的价值是什么? secret
? secret
? This is where closures come into play. 这就是闭包发挥作用的地方。 The value of input will be taken from the scope that this function was created on.
输入的值将取自创建此函数的范围。 What was the values for
input
and secret
when this function was created? 创建此函数时
input
和secret
的值是多少? Let's take a look at mystery
again: 让我们再来看看
mystery
:
function mystery ( input ){ // value 3 is passed here as a parameter
var secret = 4;
input+=2;
...
}
So we find that input
was in fact had the value 5
, and secret
had the value 4
. 因此我们发现
input
实际上具有值5
,而secret
具有值4
。 Now the returned function essentially becomes equivalent to: 现在返回的函数基本上等同于:
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)
}
OK, next: 好的,下一个:
var jumble = mystery3(hidden);
Again, mystery3
returns a function. 同样,
mystery3
返回一个函数。 alert(jumble)
gives us this: alert(jumble)
给了我们这个:
function mystery4( bonus ){
return param(6) + bonus;
}
Again, thinking in the same way as before we can say that this is equivalent to: 再次,以与之前相同的方式思考,我们可以说这相当于:
function mystery4( bonus ){
return mystery2(6) + bonus; // param <- hidden <- mistery2
} // ----- (2)
And lastly, 最后,
var result = jumble(2);
Which is equivalent to: 这相当于:
var result = mystery4(2);
That is, 那是,
var result = mystery2(6) + 2; // because (2), see above
Which is, 这是,
var result = 4 * (6 * 5) + 2; // because (1), see above
Phew... 呼...
122
I've changed some names around to make it more readable for me, add a few comments to point out values at the time of the line's execution. 我已经更改了一些名称以使其对我更具可读性,添加一些注释以指出行执行时的值。
var mystery2_handle = mystery(3);
var mystery4_handle = mystery3(mystery2_handle);
var result = mystery4_handle(2);
function mystery ( input ){
var secret = 4;
input+=2; //5
function mystery2 ( multiplier ) {
multiplier *= input; //6*5
return secret * multiplier; //30*4
}
return mystery2;
}
function mystery3 ( _mystery2_handle ){
function mystery4 ( bonus ){ //2
return _mystery2_handle(6) + bonus; //120+2
}
return mystery4;
}
Let's go step by step: 让我们一步一步走:
http://jsfiddle.net/3F4pz/ Run the code insert alerts where needed to check data. http://jsfiddle.net/3F4pz/在需要检查数据的地方运行代码插入警报。 Just remember that even though the code is top down does not mean it's executed that way.
请记住,即使代码是自上而下也不意味着它以这种方式执行。 And I'm not sure how you came up with 362.
而且我不确定你是怎么想出362的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.