JS 闭包

Feb 6, 2015

 front-end  closure  javascript  script

在JS中，当内部的方法被其他对象引用，如果内部的方法使用了外部方法的变量，将造成外部方法无法释放，变量将被保持，此时将形成闭包。

看一个例子

<a href="#" id="closureTest1">闭包测试1</a><br />
<a href="#" id="closureTest2">闭包测试2</a><br />
<a href="#" id="closureTest3">闭包测试3</a><br />

function closureTest(){
    for (var i = 1; i < 4; i++) {
       var element = document.getElementById('closureTest' + i);
       element.onclick = function(){
            alert(i);
        }
    }
}

此时无论点击哪个超链接，弹出的都是3，这是因为onclick触发时，绑定函数才会去初始化i的值，而i引用自外部函数closureTest，在closureTest中，i早已递增到3。

解决办法很简单，不闭包就行了。

function badClosureExample(){
   for (var i = 1; i <4; i++) {
       var element = document.getElementById('closureTest' + i);
       element.onclick =  clickCall(i);
   }
}

function clickCall(j){
    return function(){
        alert('您单击的是第' + j + '个链接');
    }
}

闭包也并非全然有害，有时我们也可以利用做些有趣的事，例如定时任务的传参

function bind(){
    var element = document.getElementById('closureTest0');
    element.onclick = function(){
        setTimeout(function(p){
            return function(){
                alert(p);
            }
        }('998'), 1000); //延迟1秒弹出提示
    }
}
 Toc
 Tags
 Related