闭包之利用闭包保存状态

前言

首先,这里要对闭包有一个理解,这里就不作详细介绍了。

看以下代码:

 <button>0</button> 
    <button>1</button> 
    <button>2</button> 
    <button>3</button> 
 var button = document.getElementsByTagName("button");

    var addEventListener = function(nodes){
        var i;

        for(i = 0; i < nodes.length; i++){
            nodes[i].onclick = function(e){
                alert(i);
            }
        }
    }

    addEventListener(button);

这里的运行结果是怎样呢?结果是:每点击一个button,最后alert的都是2。

因为,在for循环的时候,只是在给button绑定的事件,当你点击button的时候,对应的事件才会执行,才会alert当前i的值。而在js中,函数是运行在定义它的作用域当中,只要一个函数定义在另一个函数当中,这个函数就能访问它所在函数中定义的所有变量。这里的函数则是定义addeventlistener里面,当执行onclick事件的时候,for循环已经完成,函数当中的i已经变成2,因此无论点击哪个button,alert的都是2。

利用闭包保存状态

看以下代码:

var button = document.getElementsByTagName("button");
    // 改良后
    var addEventListener = function(nodes){
        var helper = function(i){
            return function(e){
                alert(i);
            };
        };

        var i;

        for(i = 0; i < nodes.length; i++){
            nodes[i].onclick = helper(i);
        }
    }

    addEventListener(button);
上面的for循环当中,每循环一次,都将实时的i传给helper,当点击button时,由于alert(i)这个函数是定义在helper里面,因此它的i也是来自于helper,因此可以保存每一次遍历i的状态。从上面看出,只要函数定义在helper当中,它就可以访问到定义在helper里面的所有变量,即使helper已经被执行完。而且闭包是直接return一个函数,因此return的这个函数相当于在全局调用,它里面的变量会一直保存在内存当中。

参考文献:http://www.yuanlairc.com/program/closure.html

阅读更多
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭