javascript for in 与 $().bind结合出现奇怪的问题！

Question

问题函数bindInputBlur()绑定输入框的输入内容格式限制，但是用了forin来循环绑定bind，结果却发现当触发input.bind-email的onblur事件的时候，触发的是arrRegExp的最后一个bind-hobby而不是bind-email。代码bindInputBlur();functionbindInputBlur(){vararrRegExp={'bind-email':["[^a-zA-Z0-9\.@-]+",20],'bind-qq':['(^0|[\D]+)',14],'bind-phone':['(^0|[\D]+)',11],'bind-mobile':['(^0|[\D]+)',11],'bind-vcode-4':['[^a-zA-Z0-9]+',4],'bind-vcode-sms':['[\D]',6],'bind-cardNo':['[\D]+',18],'bind-cardPwd':['[\D]+',18],'bind-username':['[^a-zA-Z0-9]',18],'bind-hobby':['',13]}varbindString='blurkeyupkeypressclick';for(variinarrRegExp){$('.'+i).bind(bindString,function(){console.log(i,arrRegExp[i]);if(!this.value||!(iinarrRegExp))return;var_regFind=arrRegExp[i][0]||'';var_maxLen=arrRegExp[i][1]||0;if(_regFind){varregExp=newRegExp(_regFind,'g');if(regExp&®Exp.test(this.value)){this.value=this.value.replace(regExp,'');}}if(typeof_maxLen=='number'&&_maxLen&&this.value.length>_maxLen){this.value=this.value.substring(0,_maxLen);}});}}

Answer 1

教科书式的闭包问题+1
因为是过来人，所以给你举个简单易懂的例子，如果你想了解闭包的更多知识，请阅读闭包在JavaScript中的解释。
//以下代码不会像你期望的那样工作，因为变量‘i’没有被锁定，每次点击
//时警示窗都会显示全部的元素数目，因为在那个点上它正是变量‘i’的值
varelems=document.getElementsByTagName('a');
for(vari=0;i
elems[i].addEventListener('click',function(e){
e.preventDefault();
alert('我是链接#'+i);
},'false');
}
//以下的代码可以达到我们的目的，在这个IIFE闭包中，变量‘i’像一个
//‘锁定索引’被锁在其中。当循环结束执行时，尽管变量‘i’的值是元素的总数
//但在IIFE闭包中，‘锁定索引’的值总是当时方法被调用时传入的‘i’值，因此
//当一个链接被点击时，警示窗就会显示正确的值了。
varelems=document.getElementsByTagName('a');
for(vari=0;i
(function(lockedInIndex){
elems[i].addEventListener('click',function(e){
e.preventDefault();
alert('我是链接#'+lockedInIndex);
},'false');
})(i);
}
//你也可以像这样使用一个IIFE，虽然效果相同，但我觉得上面的写法可读性更高。
varelems=document.getElementsByTagName('a');
for(vari=0;i
elems[i].addEventListener('click',(function(lockedInIndex){
returnfunction(e){
e.preventDefault();
alert('我是链接#'+lockedInIndex);
};
})(i),'false');
}
参考链接