首页  >  文章  >  后端开发  >  如何通俗地解释闭包的概念?

如何通俗地解释闭包的概念?

WBOY
WBOY原创
2016-06-06 16:22:441251浏览

网上随便搜一个闭包的解释,动不动就长篇大论,各种专业名词,又扯上了内存泄露,各种用法……
我不想了解那么多没用的,能不能简单的告诉到底什么是闭包,我不关心闭包怎么就不能被销毁,怎么个指针指来指去的,看得我是越看头越晕!!
我得理解就是:
(函数里面有个局部变量,然后通过在把这个变量的值retrun给函数)
这个过程就是闭包特性了。这个用法是不是太常见了啊。。。怎么那么多大牛能写出来那么长的文章来

回复内容:

假设你现在有一个函数 f (x) = a + x

这个函数是不完整的,比如 f (1) = a + 1 你还差一个问题: a 是多少?

有两个方法回答这个问题

第一种叫“动态作用域”,a的值决定于函数调用时上下文中a的值,比如

a = 1;
v=f(1) ; 这里v为2

动态作用域的问题是,函数每一次调用相同的参数未必返回相同的值,其返回值还取决于上下文的某些值

第二种是“词法作用域”,a的值取决于函数定义时上下文中的值

g (a) = lambda (x) a + x;
f = g(2)

这里函数g返回一个和上面函数f形式一样函数,a在此处为2,那么执行

a = 1;
v=f(1) ;这里v为3

因为f要“记住”自己定义时a的值为2,所以实现时

f (x) = a + x 和 a = 2 被打包在一块,被称为“闭包”,意思是它是完整独立的,仅仅依靠调用时参数求值,不再依赖调用时的上下文

晕,写完以后才发现我也写了不少... 可以这样理解,因为『纯』的函数是没有状态的,加入了闭包以后就变成有状态的了,相对于一个有成员变量的类实例来说,闭包中的状态值不是自己管理,可以认为是『上帝』在管理。

看下面这个 javascript 例子:
<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>
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn