JavaScript闭包封装的经典案例

一、闭包的含义

1.设计一个table，使鼠标点击哪行就能显示行数：

<table id="table">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<div id="console"></div>

错误js代码：

var consle=document.getElementById("consle");
var tab=document.getElementById("table");
var trs=document.getElementByTagname("tr");
for (var i=0;i<trs.length ;i++ ){
    var tr=trs[i];
    tr.onclick=function(){
        consle.innerHTML="第"+i+"行";//这样的话每次显示都是trs.length
    }
} 

正确js代码：

var consle=document.getElementById("consle");
var tab=document.getElementById("table");
var trs=document.getElementByTagname("tr");
for (var i=0;i<trs.length ;i++ ){
    var tr=trs[i];
    tr.onclick=(function(){
        var rowNum=i;
        return function(){
            consle.innerHTML="第"+rowNum+"行"；
        }
    }());
}

简单地说，闭包需要具备以下三个条件：

①函数嵌套函数。

②外部函数return了内部函数。

③内部函数中包含了外部函数定义的变量

 二、闭包的作用：

1.允许外部引用内部函数变量

function foo(x){
    var tmp=3;
    return function(y){
        alert(x+y+(++tmp));
    }
}

var f=foo(2);//形成闭包
f(10);

2.使某些局部变量始终存在于内存中：

function f(){
    var n=999;
    nAdd=function(){
        n+=1;
    }
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f();
result();//结果：999
nAdd();
result();//结果：1000

三、对闭包的理解：

如果将闭包用java的思路理解，就是外部函数相当于一个类，外部函数定义的变量相当于类中的内部私有成员，其他类不能调用，但闭包（内部函数）相当外部函数中的getter&setter方法，我们可以通过它获得（甚至设置）内部变量的值。如下：

var person=function(){
    var name="default";
    return {
        getName:function(){
            return name;
        },
        setName:function(newName){
            name=newName
        }
    }
}();
alert(person.name);//undefined(无法直接访问)
alert(person.getName());//default
person.setName("孙悟空");
alert(person.getName());//孙悟空

 

转载于:https://my.oschina.net/marina1216/blog/792986