js通过为function设置自定义属性的方法解决闭包陷阱

2019独角兽企业重金招聘Python工程师标准>>>

一个经典的闭包问题：

<div id="a0">a0</div>
<div id="a1">a1</div>
<div id="a2">a2</div>

function test() {
    for (var i = 0; i < 3; i++) {
        document.getElementById('a'+i).onclick= function() { alert(i); }
    }
}
test();

结果会是a0 a1 a2三个元素点击后alert的值均为3，因为闭包使它们使用了同一个i的值。

经典的解决方法是：

function test(){
    for(var i=0;i<3;i++){
        (function(){
            var j=i;
            document.getElementById('a'+i).onclick = function() { alert(j); }
        })()
    }
}
test();

性能更好的解决方法：

function test(){
    for(var i=0;i<3;i++){
        (document.getElementById('a'+i).onclick = function() { alert(arguments.callee.j); }).j=i;
    }
}

很巧妙地通过为function设置自定义属性的方法，不用闭包，就完美解决了问题。

转载于:https://my.oschina.net/codespring/blog/532047