How does JavaScript closure work in the following example?
This question already has an answer here:
You would need to pass in 5 as unknown .
Brief definition of closure for completeness
From This SO link
Numbers are pass-by-value in javascript
The b argument that is passed to a() is saved in the closure that a returns. So in your example, b is saved to be the value of x , or 2 . This is because Number s in javascript are pass-by-value. This means that changing x DOES NOT change the value of b inside the closure that a returns.
Short example for clarity:
var a = function(x) {
return function() {
return x + 1;
};
};
var x1 = 1;
var fn1 = a(x1); // x1 is passed by value, so x inside the closure is its own copy of 1
x1 = 2 // no effect on the next line
console.log(fn1()) // prints 2, does NOT print 3The simplest description of a closure I've heard is:
It's a way for a function to have indefinite access to the environment it was created in.
So in:
var a = function(b) { /* "outer" aka "functionofb" */
return function(c) { /* "inner" aka "functionofc" */
return y + b + c;
}
};
We're going see how this gives the inner function indefinite access to (a copy of) variable 'b' as it existed when inner sprang into life. (In this example the inner function never changes the value of its copy of 'b', but it could.)
So to walk through your example, lets start Here:
x = 2;
var fn = a(x);
The variable a "points" to an un-named (anonymous) function (the one with 'b' as an arg), so this is essentially:
fn = functionofb(x);
or :
fn = functionofb(2);
Now 'functionofb' is a function which returns a function. The function it returns is:
function(c) {
return y + b + c;
}
(which is also anonymous, so we will call it `functionofc')
So:
function(c) {
return y + 2 + c; /* here 'b's value is 'captured' by the closure */
}
Then we have:
y = 3;
And do:
fn(5);
Which is just:
functionofc(5);
which gives us:
return y + 2 + c;
Or:
return 3 + 2 + 5; /* 'y' was never captured, the current value is used */
Which is the desired answer:
10
Everything else are just red herrings.
For a more complete discussion of JavaScript closures in general see How do JavaScript closures work?
When you do this ...
var fn = a(x);
... the variable fn becomes equal to ...
function(c) {
return y + 2 + c;
}
... because x is equal to 2 at that moment, and the value of x is captured (fixed) when you execute function a .
So, when you execute fn(5) with variable y being equal to 3 at the very moment you're running function fn , that means that function will do this...
return 3 + 2 + 5;
Since 3 + 2 + 5 = 10, that means your output is 10.
Note 1 :
fn(5) would have returned 12 if you had ran it before y = 3; , because the value of y was 5 at that time. See this Fiddle for a demo.
Note 2 :
For more info on closures, see also this question :
How do JavaScript closures work?
链接地址: http://www.djcxy.com/p/1488.html