Maison > Article > développement back-end > 如何通俗地解释闭包的概念?
网上随便搜一个闭包的解释,动不动就长篇大论,各种专业名词,又扯上了内存泄露,各种用法……
我不想了解那么多没用的,能不能简单的告诉到底什么是闭包,我不关心闭包怎么就不能被销毁,怎么个指针指来指去的,看得我是越看头越晕!!
我得理解就是:
(函数里面有个局部变量,然后通过在把这个变量的值retrun给函数)
这个过程就是闭包特性了。这个用法是不是太常见了啊。。。怎么那么多大牛能写出来那么长的文章来
<code class="language-text">var counter = function() {
var counter = 0
return function() {
return counter++
}
}
var anotherCounter = counter()
console.log(anotherCounter())
console.log(anotherCounter())
console.log(anotherCounter())
</code>
片面地讲 闭包就是 “北京城”,一层一层的控制,皇宫的皇上看上城内的妹子就可以用,城内的汉子要么用城内的妹子,要么去城外 =。=
把数据和作用域绑定到一起就是闭包。
可以学习下做下面几道题:Learning Advanced JavaScript
通过引用变量从而阻止该变量被垃圾回收的机制
将一个上下文的私有变量的生命周期延长的机制
搬运一下 @winter 的blog 闭包概念考证 · Issue #3 · wintercn/blog · GitHub
<code class="language-js"><span class="c1">// One of JavaScript's most powerful features is closures. If a function is</span>
<span class="c1">// defined inside another function, the inner function has access to all the</span>
<span class="c1">// outer function's variables, even after the outer function exits.</span>
<span class="kd">function</span> <span class="nx">sayHelloInFiveSeconds</span><span class="p">(</span><span class="nx">name</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">prompt</span> <span class="o">=</span> <span class="s2">"Hello, "</span> <span class="o">+</span> <span class="nx">name</span> <span class="o">+</span> <span class="s2">"!"</span><span class="p">;</span>
<span class="c1">// Inner functions are put in the local scope by default, as if they were</span>
<span class="c1">// declared with `var`.</span>
<span class="kd">function</span> <span class="nx">inner</span><span class="p">(){</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">prompt</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="nx">inner</span><span class="p">,</span> <span class="mi">5000</span><span class="p">);</span>
<span class="c1">// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will</span>
<span class="c1">// exit immediately, and setTimeout will call inner afterwards. However,</span>
<span class="c1">// because inner is "closed over" sayHelloInFiveSeconds, inner still has</span>
<span class="c1">// access to the `prompt` variable when it is finally called.</span>
<span class="p">}</span>
<span class="nx">sayHelloInFiveSeconds</span><span class="p">(</span><span class="s2">"Adam"</span><span class="p">);</span> <span class="c1">// will open a popup with "Hello, Adam!" in 5s</span>
</code>
<code class="language-js"><span class="kd">var</span> <span class="nx">globalVal</span><span class="o">=</span><span class="kc">null</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">fn</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">a</span><span class="o">=</span><span class="mi">1</span><span class="p">;</span>
<span class="nx">globalVal</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span>
<span class="nx">a</span><span class="o">++</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="nx">globalVal</span><span class="p">();</span><span class="c1">//2</span>
<span class="nx">globalVal</span><span class="p">();</span><span class="c1">//3</span>
</code>