common mistake of closure in loops

  下例中item引用的始终是最后一个值。

function showHelp(help) {
document.getElementById('help').innerHTML = help;
} function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
]; for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
} setupHelp();

  解法一:callback时,加一层closure以保留item状态

function showHelp(help) {
document.getElementById('help').innerHTML = help;
} function makeHelpCallback(help) {
return function() {
showHelp(help);
};
} function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
]; for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
} setupHelp();

  解法二:loop时,加一层closure以保留item状态

function showHelp(help) {
document.getElementById('help').innerHTML = help;
} function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
]; for (var i = 0; i < helpText.length; i++) {
(function() {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
})(); // Immediate event listener attachment with the current value of item (preserved until iteration).
}
} setupHelp();

  解法三:使用let

function showHelp(help) {
document.getElementById('help').innerHTML = help;
} function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
]; for (var i = 0; i < helpText.length; i++) {
let item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
} setupHelp();

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

common mistake of closure in loops的更多相关文章

  1. [Javascript] Closure Cove, Common mistake

    They’ve got a problem with their existing code, which tries to use a closure. Check it out: function ...

  2. Go xmas2020 学习笔记 06、Control Statements、Declarations & Types

    06-Control Statements. If-then-else. Loop. for. range array. range map. infinite loop. common mistak ...

  3. [转]50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs

    http://devs.cloudimmunity.com/gotchas-and-common-mistakes-in-go-golang/ 50 Shades of Go: Traps, Gotc ...

  4. Yet Another 10 Common Mistakes Java Developers Make When Writing SQL (You Won’t BELIEVE the Last One)--reference

    (Sorry for that click-bait heading. Couldn’t resist ;-) ) We’re on a mission. To teach you SQL. But ...

  5. Unity 5 Game Optimization (Chris Dickinson 著)

    1. Detecting Performance Issues 2. Scripting Strategies 3. The Benefits of Batching 4. Kickstart You ...

  6. Go 1 Release Notes

    Go 1 Release Notes Introduction to Go 1 Changes to the language Append Close Composite literals Goro ...

  7. linux内核的makefile.txt讲解

    linux内核的linux-3.6.5\Documentation\kbuild\makefiles.txt Linux Kernel Makefiles This document describe ...

  8. (转)A Survival Guide to a PhD

    Andrej Karpathy blog About Hacker's guide to Neural Networks A Survival Guide to a PhD Sep 7, 2016 T ...

  9. Linux内核Makefile文件(翻译自内核手册)

    --译自Linux3.9.5 Kernel Makefiles(内核目录documention/kbuild/makefiles.txt) kbuild(kernel build) 内核编译器 Thi ...

随机推荐

  1. CMD命令搜索有某文本文件的内容

    FIND "字符串" <文件名>其中文件名部分可包含驱动器号和目录名部分,也可使用*,?通配符.另外有几个参数可用,  /V         显示所有未包含指定字符串的 ...

  2. <Linux> 文件夹右下角有锁,解锁

    sudo chown -R $USER 文件夹路径 例如:sudo chown -R $USER ~/scala

  3. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  4. C#利用反射动态调用DLL并返回结果,和获取程序集的信息

    反射的基本概念: .Net Framework 中提供了反射机制,可以再加载程序运行时,动态获取和加载程序集,并且可以获取到程序集的信息 创建Assembly和Entity两个程序集,在Assembl ...

  5. 【转】简明 Vim 练级攻略

    原地址:https://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一 ...

  6. python_03 各种运算符

    1.算数运算 2.比较运算 3.赋值运算 4.逻辑运算 先计算括号中表达式 计算顺序:and,or,not在一个表达式中从前到后计算, 若and前一个元素为false则立刻返回为False,不计算后面 ...

  7. linux下通过sed命令直接修改文件内容

    sed是实现对流的编辑.通常,我们使用sed可以实现内容的编辑后然后保存成另外的一个文件,如果正确的话,才写入到源文件.但是某些时候,我们需要直接修改文件,因为,保存文件到一个文件,然后再覆盖原文件的 ...

  8. Python基本数据类型以及字符串

    基本数据类型                数字  int ,所有的功能,都放在int里            a1 = 123            a1 = 456                 ...

  9. Netty - 3 内存分配

    https://www.cnblogs.com/gaoxing/p/4253833.html netty的buffer引入了缓冲池.该缓冲池实现使用了jemalloc的思想 内存分配是面向虚拟内存的而 ...

  10. Error building Player: Exception: Could not start java

    4.6.1发布Flash版本出错.解决方法:把C:\Windows\System32\java.exe复制到C:\Windows\SysWOW64下即可