在循环中使用JavaScript闭包
2014-08-10T21:25:00+08:00
再见理想
闭包是一个语言的高级特性,JavaScript
中闭包的使用能够给开发者足够多的好处,当然也带来了足够多的坏处,例如内存难管理,bug
隐蔽难调试等。
下面是一个在循环中使用闭包的例子:
for (var idx = 0; idx < data.length; idx++) {
var $html = $('.concern_item_template').find('.itm').clone();
$html.find('.ttl').text(data[idx].name);
$html.data('id', data[idx].id);
//初始化闭包的上值;
var item = data[idx];
//直接绑定click事件,回调中同样可以访问上值,但是注意闭包特性中;
//访问的上值是父命名空间最终的值,非闭包创建时的值;
//例如item这个变量在父命名空间(循环中)最终的值就是列表最后一个对象;
/*
$html.onclick=function(){
console.log(item)//<--将会输出同样的值;
};
*/
//解决方案;
//1. 将item值绑定到其他对象;
/*
$html.data('item',item);
$html.find('xxx').one('click',fuction(){
$(this).parents('yyy').data('item');
});
*/
//2. 使用立即执行函数,本例中就是如此;
(function($html, item) {
$html.find('.concern').one('click', function() {
//关注;
$.get('xxx', {
type: type,
public_id: item.id
}, function(data) {
//移除;
$html.remove();
}, 'json');
});
})($html, item) //<--这里将上值传入的;
$('#' + parent_obj).append($html);
//3. 直接将item绑定到回调对象(应该归为第一类,但写法很特殊单独说一下);
/*
($html.find('xxx').click=function(){
arguments.callee.item;
}).item=item;
*/
//4. 在回调对象上使用立即执行函数(应该归为第二类,但写法很繁杂,单独说一下);
/*
$html.find('xxx').one('click',(function($html,item){
return function(event){
$html;
item;
};
})($html,item));
*/
//总的思路就是增加item变量的引用数,这样在循环中下次初始化item变量时;
//js引擎就会使用新的临时变量item,这样和回调绑定的上值就是不一样的临时指针;
}
标签:
JavaScript