javascript闭包及其使用场景

概念

先看一段代码

function t1(){
     var age = 22;
     function t2(){
        alert(age);
     }
     return t2;
}
var tmp = t1();
var age = 99;
tmp();//22

在大部分的语言中,t1被调用执行,则申请内存,并把局部变量push入栈。t1函数执行完毕,内部的局部变量随着函数的退出而销毁。因此,age = 22这个局部变量就消失了。

但是在js中,age = 20这个变量却被t2捕捉,即使t1执行完毕,通过t2依然能够访问该变量。这种情况》返回的函数,并非孤立的函数,甚至把其周围的变量环境,形成了封闭的“环境包”,共同返回,所以叫闭包。
闭包:函数内自由变量的查找,是在函数定义的地方向上级作用域查找,而不是调用的地方。

闭包的应用场景

  1. 使用闭包代替全局变量
  2. 函数外或在其他函数中访问某一函数内部的参数
  3. 在函数执行之前为要执行的函数提供具体参数
  4. 在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数
  5. 为节点循环绑定click事件,在事件函数中使用当次循环的值或节点,而不是最后一次循环的值或节点
  6. 暂停执行
  7. 包装相关功能

闭包计数器

**问题:**多个人开发js程序,需要一个全局计数器,多个人的函数共同用一个计数器,计数器一直增长。


**答:**设立一个全局变量, window.cnt = 0;调用:++window.cnt;
分析:虽然这个方法可行,但是应该避免过多的使用全局变量,防止全局变量被污染。当你引用其他人的js程序时,如果他的程序内也有一个全局变量window.cnt = ‘hello’;那么你的全局变量就会被无情的改变了

那么如何使用闭包做计数器呢?

第一版

function counter(){
   var cnt = 0;
   var cnter = function (){
      return ++cnt;
   }
   return cnter;
}
var inc = counter();
alert(inc());
alert(inc());
alert(inc());

当counter执行完毕后,除了返回的cnter函数谁也访问不到cnt变量了
但是,这样有2个问题,全局多了一个counter函数和inc变量
下面,我们使用立即执行函数。

第二版简化

var cnt = (function (){
	var cnt = 0;
	return function(){
		return ++cnt;
    }
})();

alert(cnt());
alert(cnt());

疑问:cnt不依然是全局变量吗?

在工作中,如何避免全局污染和冲突。

  1. 统一放在一个全局对象上,如:jquery ->$
  2. 每人用自己的命名空间。如:省份+姓名(hn-yk)河南+yk

第三版

jquery的计数器插件形式

var $ = {};//jquery对象
$.cnt = (function (){
	var cnt = 0;
	return function(){
		return ++cnt;
	}
})();

alert($.cnt());
alert($.cnt());

个人命名空间,在团队开发中也很常见。

var HN_YK = {};
HN_YK.cnt = (function (){
	var cnt = 0;
	return function(){
		return ++cnt;
	}
})();

alert(HN_YK.cnt());
alert(HN_YK.cnt());

你可能感兴趣的:(#,JavaScript,闭包,计数器,闭包计数器)