在案例的基础上分析。

验证文本框

HTML

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

Javascript

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 = function() {showHelp(item.help);}}
}
setupHelp();

分析

var引起的赋值错误

var声明的全局变量，只会把循环的最后一项进行赋值，只会显示

  var item = helpText[i];document.getElementById(item.id).onfocus = function() {showHelp(item.help);}

最优的解决方案forEach(function(item){})

function showHelp(help) {document.getElementById('help').textContent = 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)' },];helpText.forEach(function (text) {document.getElementById(text.id).onfocus = function () {showHelp(text.help);};});
}setupHelp();

最简单的方式，const/let 申明一个局部变量

  for (var i = 0; i < helpText.length; i++) {let item = helpText[i];document.getElementById(item.id).onfocus = function() {showHelp(item.help);}}

直接使用函数

function makeHelpCallback(help) {return function() {showHelp(help);};
}document.getElementById(item.id).onfocus = makeHelpCallback(item.help);

通过声明函数变量的方式定义函数

var makeHelpCallback = function(help){return function() {showHelp(help);};
}document.getElementById(item.id).onfocus = makeHelpCallback(item.help);

申明匿名函数和自动调用函数的区别

1. 每一次循环，把函数的引用进行赋值

   document.getElementById(item.id).onfocus = function() {
   showHelp(item.help)
   }

2. (function())() 自动调用函数只会初始化一次，整个模块公用，所以在循环中不要用 ()()
   document.getElementById(item.id).onfocus =(function() {
   showHelp(item.help)
   })()