JavaScript闭包封装的经典案例

原创
2016/11/23 16:16
阅读数 419

一、闭包的含义

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());//孙悟空

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部