【javascript笔记】关于javascript中的闭包<五>

﹏ヽ暗。殇╰゛Y 2022-08-07 07:39 163阅读 0赞

最开始看《javascript高级程序设计》的时候就看到了javascript中的闭包,在第七章第二节....好大概知道了,过了段时间,好了又忘了...

我们来看这本书里面关于闭包是怎么描述的吧(应该很清楚吧):

*闭包是指有权访问另一个函数作用域中的变量的函数.*

*\[白话\]闭包是函数，这里可以理解为可以访问父函数甚至祖先函数中变量的函数。*

其实这里可以要理解一下作用域链,关于作用域链大家可以去看一下《javascript高级程序设计》第四章第二节.

最简单的例子:

function SuperFunc(){ 
    			var superPara=5;
    			return function(){ 
    					return ++superPara;
    			}
    		}

不明白闭包有什么好处于是度娘查了一下，在贴吧里面发现了答案,请看下图:

[原帖吧地址请点击我。][Link 1]

![Center][]

今天刚好要写一个onmouseenter onmouseleave 事件的js函数.不得已好像要声明全局变量...感觉不对劲.所以写了一个最简单的闭包..先做下记录

以前只知道闭包的作用有不污染全局环境，还有就是模块开发\[从上面的图片发现的\].昨天做这个最简单的效果的时候，我就想到了，不用全局变量.用闭包：

**作用一  不污染全局环境【多人协同开发有必要】**：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

其实上面的代码感觉还是有点累赘,因为这个函数，是在页面初始化的时候执行。只需要执行一次，页面载入的时候执行 我们可以直接写成匿名函数立即执行，返回的函数也立即执行.代码如下：

![复制代码][copycode.gif]

+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);
                })
            }()
        }();

![复制代码][copycode.gif]

**作用二  利用闭包缓存数据**：

这个也是我在伯乐在线看到的文章\[第二点\]知道的([原链接点我][Link 2]):

重复字符串(如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方法,性能提升很大

再改进：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

利用闭包将对象和join方法缓存起来，不用每次都新建对象和寻找方法。

一些资料:[http://lazy2009.iteye.com/blog/1788685][http_lazy2009.iteye.com_blog_1788685]

《 JavaScript语言精粹》第四章 12 小节

有兴趣的可以去研究一下.

[Link 1]: http://tieba.baidu.com/p/2348703848#33278758041l
[Center]: /images/20220805/2cf5c32da03d4dcba54ac294361b3648.png
[copycode.gif]: /images/20220805/993bf1c77fdf432a88066936fdaf65a8.png
[Link 2]: http://web.jobbole.com/82346/
[http_lazy2009.iteye.com_blog_1788685]: http://lazy2009.iteye.com/blog/1788685