javascript-修复循环中的闭包
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-修复循环中的闭包，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1876字，纯文字阅读大概需要3分钟。
内容图文
我正在阅读JavaScript：David Flanagan撰写的权威指南,而我受困于以下示例：
window.onload = function() {
var elements = document.getElementsByClassName("reveal");
for(var i = 0; i < elements.length; i++) {
var elt = elements[i];
var title = elt.getElementsByClassName("handle")[0];
title.onclick = function() {
if(elt.className == "reveal") elt.className = "revealed";
else if(elt.className == "revealed") elt.className = "reveal;"
}
}
};
<div class="reveal">
<h1 class="handle">Click Here to Reveal Hidden Text</h1>
<p>This paragraph is hidden. It appears when you click on the title.</p>
</div>
问题在于当前形式的代码有效,但是如果我要添加一个以上带有揭示类的div,则无论我单击什么h1元素,只有最后一个都会扩展.我应该在代码中进行哪些更改才能使其在单独的div上工作？
附言我确实知道,由于问题的性质是循环内的闭包,因此这类问题经常被问到,但是鉴于SO上类似问题的解决方案,我无法使我的代码正常工作.谢谢.
解决方法:
在JavaScript中,变量作用域是在函数级别设置的.函数创建本质上定义范围边界的闭包.子作用域可以访问在父作用域中定义的变量,但不能相反.
调用onclick处理函数时,它必须在作用域链中查找变量elt,因为elt未在当前作用域内声明.
作用域链中的下一个层次是window.onload处理函数(即闭包).在此范围内,声明了变量elt,其值由循环设置.但是请记住,当您点击< h1>并调用onclick处理程序,则循环已终止.因此,elt将始终是循环中设置的最后一个值.这就是为什么总是总是把elt作为最后一个元素.
若要解决此问题,您可以使用立即执行功能.立即执行函数创建一个新的闭包(和作用域),其中elt在本地声明.因为变量elt现在在此新的内部范围中声明,所以它不会被父范围中的循环修改：
window.onload = function() {
var elements = document.getElementsByClassName("reveal");
for(var i = 0; i < elements.length; i++) {
var elt = elements[i];
var title = elt.getElementsByClassName("handle")[0];
title.onclick = (function(elt) {
return function() {
if(elt.className == "reveal") elt.className = "revealed";
else if(elt.className == "revealed") elt.className = "reveal;"
};
})(elt);
}
};
内容总结
以上是互联网集市为您收集整理的javascript-修复循环中的闭包全部内容，希望文章能够帮你解决javascript-修复循环中的闭包所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。