[英]How to access variables in another scope inside a function using closure in javascript?
I have the following function makeStopwatch
that I am trying to work through to better understand javascript closures: 我有以下函数makeStopwatch
,我正在努力更好地理解javascript闭包:
var makeStopwatch = function() {
var elapsed = 0;
var stopwatch = function() {
return elapsed;
};
var increase = function() {
elapsed++;
};
setInterval(increase, 1000);
return stopwatch;
};
var stopwatch1 = makeStopwatch();
var stopwatch2 = makeStopwatch();
console.log(stopwatch1());
console.log(stopwatch2());
When I console.log
the calls to stopwatch1
and stopwatch2
I get 0
returned each time respectively. 当我在console.log
中调用stopwatch1
和stopwatch2
我每次都会返回0
。
As I understand the intended functionality of makeStopwatch
the variable elapsed
would be 0
if returned by the inner function stopwatch
. 据我了解makeStopwatch
的预期功能,如果内部函数stopwatch
返回,则elapsed
的变量将为0
。 The inner function increase
increments the variable elapsed
. 内部函数increase
增加elapsed
的变量。 Then setInterval
calls increase
after a delay of 1 second. 然后setInterval
调用在延迟1秒后increase
。 Finally, stopwatch
is returned again this time with the updated value which is expected to be 1
. 最后,这次再次返回stopwatch
,更新的值预计为1
。
But this doesn't work because inside makeStopwatch
, the inner stopwatch
, increase
, and setInterval
functions are all in independent scopes of one another? 但这不起作用,因为在makeStopwatch
内部,内部stopwatch
, increase
和setInterval
函数都在彼此的独立范围内?
How can I revise this to work as I understand it so that elapsed
is incremented and that value is closed over and saved so that when I assign makeStopwatch
to variable stopwatch1
and call stopwatch1
the updated value is returned? 我怎样才能修改这个工作,我了解它,这样elapsed
递增和值在关闭并保存,这样,当我给你makeStopwatch
变量stopwatch1
并调用stopwatch1
返回更新后的值?
var makeStopwatch = function() {
var elapsed = 0;
// THIS stopwatch function is referenced later
var stopwatch = function() {
return elapsed;
};
var increase = function() {
elapsed++;
};
// This setInterval will continue running and calling the increase function.
// we do not maintain access to it.
setInterval(increase, 1000);
// THIS returns the stopwatch function reference earlier. The only way
// we can interact with the closure variables are through this function.
return stopwatch;
};
var stopwatch1 = makeStopwatch();
// This runs the makeStopwatch function. That function *RETURNS* the
// inner stopwatch function that I emphasized above.
console.log(stopwatch1());
// stopwatch1 is a reference to the inner stopwatch function. We no longer
// have access to the elapsed variable or the function increase. However
// the `setInterval` that is calling `increase` is still running. So every
// 1000ms (1 second) we increment elapsed by 1.
So if were were to put all of the above code into the console, and then call console.log(stopwatch1())
sporadically, it will console.log the number of seconds since we created the stopwatch. 因此,如果将所有上述代码放入控制台,然后偶尔调用console.log(stopwatch1())
,它将调试自我们创建秒表后的秒数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.