Javascript的闭包，匿名函数，自动调用

在案例的基础上分析。

验证文本框

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)
   })()