js

you don't know js

  • 变量
  • this
  • 闭包
  • copy
  • 回调
  • 变量提升
5.闭包问题

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}
上方是一个很常见闭包问题,点击任何div弹出的值总是5,因为当你触发点击事件的时候i的值早已是5,可以用下面方式解决:

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次为0,1,2,3,4
        };
    })(i);
}
在绑定点击事件外部封装一个立即执行函数,并将i传入该函数即可。


http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

results matching ""

    No results matching ""