2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!

Fork me on GitHub

JavaScript的闭包

1. 什么是闭包
通俗地讲,JavaScript 中每个的函数都是一个闭包,但通常意义上嵌套的函数更能够体现出闭包的特性,请看下面这个例子:
var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter = generateClosure();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3

现象:

这段代码中,generateClosure() 函数中有一个局部变量count,初值为 0。
还有一个叫做 get 的函数,get 将其父作用域,也就是 generateClosure() 函数中的 count 变量增加 1,并返回 count 的值。generateClosure() 的返回值是 get 函数。
在外部我们通过 counter 变量调用了 generateClosure() 函数并获取了它的返回值,也就是 get 函数,接下来反复调用几次 counter(),我们发现每次返回的值都递增了 1。
 
分析:
让我们看看上面的例子有什么特点,按照通常命令式编程思维的理解,count 是generateClosure 函数内部的变量,它的生命周期就是 generateClosure 被调用的时期,当 generateClosure 从调用栈中返回时,count 变量申请的空间也就被释放。
问题是,在 generateClosure() 调用结束后,counter() 却引用了“已经释放了的” count变量,而且非但没有出错,反而每次调用 counter() 时还修改并返回了 count。
这是怎么回事呢?
这正是所谓闭包的特性。当一个函数返回它内部定义的一个函数时,就产生了一个闭包,闭包不但包括被返回的函数,还包括这个函数的定义环境。
上面例子中,当函数generateClosure() 的内部函数 get 被一个外部变量 counter 引用时,counter 和generateClosure() 的局部变量就是一个闭包。
如果还不够清晰,下面这个例子可以帮助你理解:
var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter1 = generateClosure();
var counter2 = generateClosure();
console.log(counter1()); // 输出 1
console.log(counter2()); // 输出 1
console.log(counter1()); // 输出 2
console.log(counter1()); // 输出 3
console.log(counter2()); // 输出 2
 
上面这个例子解释了闭包是如何产生的:counter1 和 counter2 分别调用了 generate-Closure() 函数,生成了两个闭包的实例,它们内部引用的 count 变量分别属于各自的运行环境。
我们可以理解为,在 generateClosure() 返回 get 函数时,私下将 get 可能引用到的 generateClosure() 函数的内部变量(也就是 count 变量)也返回了,并在内存中生成了一个副本,之后 generateClosure() 返回的函数的两个实例 counter1和 counter2 就是相互独立的了。
 
html:
<ul>
  <li id="a1">aa</li>
  <li id="a2">aa</li>
  <li id="a3">aa</li>
</ul>
 
js:
var lists = document.getElementsByTagName("li");
    for(var i=0; i<lists.length; i++){
        //i最后等于3 
        //想办法保存住i的值=>想到闭包
        function saveI(i){
            lists[i].onclick = function(){
              alert(i)
            }
        }
        
        saveI(i);
    } 

 js:

var lists = document.getElementsByTagName("li");
for(var i=0; i<lists.length; i++){
        lists[i].onclick = function(){
            //这里this的指向是没问题的 只是i的值不能保留
            alert(this.getAttribute('id'))
        }
} 

 

 
2. 闭包的用途
嵌套的回调函数
闭包有两个主要用途:
(1)是实现嵌套的回调函数
(2)是隐藏对象的细节
JavaScript通过约定在所有私有属性前加上下划线(例如_myPrivateProp)
 
 

posted on 2015-12-30 22:43  qize  阅读(315)  评论(0编辑  收藏  举报

导航