【javascript笔记】关于javascript中的闭包
最开始看《javascript高级程序设计》的时候就看到了javascript中的闭包,在第七章第二节....好大概知道了,过了段时间,好了又忘了...
我们来看这本书里面关于闭包是怎么描述的吧(应该很清楚吧):
闭包是指有权访问另一个函数作用域中的变量的函数.
[白话]闭包是函数,这里可以理解为可以访问父函数甚至祖先函数中变量的函数。
其实这里可以要理解一下作用域链,关于作用域链大家可以去看一下《javascript高级程序设计》第四章第二节.
最简单的例子:
function SuperFunc(){
var superPara=5;
return function(){
return ++superPara;
}
}
不明白闭包有什么好处于是度娘查了一下,在贴吧里面发现了答案,请看下图:
今天刚好要写一个onmouseenter onmouseleave 事件的js函数.不得已好像要声明全局变量...感觉不对劲.所以写了一个最简单的闭包..先做下记录
以前只知道闭包的作用有不污染全局环境,还有就是模块开发[从上面的图片发现的].昨天做这个最简单的效果的时候,我就想到了,不用全局变量.用闭包:
作用一 不污染全局环境【多人协同开发有必要】:
var changeColor=function(){ var rawColor; return function(){ $('a').on('mouseover',function(){ rawColor= $(this).css('backgroundColor'); $(this).css('background-color','red'); //alert(rawColor); }).on('mouseleave',function(){ //alert(rawColor); $(this).css('background-color',rawColor); }) } }(); changeColor();
其实上面的代码感觉还是有点累赘,因为这个函数,是在页面初始化的时候执行。只需要执行一次,页面载入的时候执行 我们可以直接写成匿名函数立即执行,返回的函数也立即执行.代码如下:
+function(){ var rawColor; return +function(){ $('a').on('mouseover',function(){ rawColor= $(this).css('backgroundColor'); $(this).css('background-color','red'); }).on('mouseleave',function(){ $(this).css('background-color',rawColor); }) }() }();
作用二 利用闭包缓存数据:
这个也是我在伯乐在线看到的文章[第二点]知道的(原链接点我):
重复字符串(如abc=>abcabc)
function repeat(target,n){ return (new Array(n+1).join(target)); }
改良版本:
function repeat(target,n){ return Array.prototype.join.call( {length:n+1},target);//之所以要创建带length属性的对象,是因为调用数组原型方法时,必须是一个类数组对象,而类数组对象的条件就是length为非负整数 }
不新建数组,而是用拥有length属性的对象替代,然后调用数组的join方法,性能提升很大
再改进:
var repeat=(function(){ var join=Array.prototype.join,obj={}; return function(target,n){ obj.length=n+1; return join.call(obj,target); } })();
利用闭包将对象和join方法缓存起来,不用每次都新建对象和寻找方法。
一些资料:http://lazy2009.iteye.com/blog/1788685
《 JavaScript语言精粹》第四章 12 小节
有兴趣的可以去研究一下.