为何for循环置于外层时emotionSelected未定义？移至getInput则正常

这问题我太熟了！核心原因是代码执行时机完全不对，咱们一步步拆解清楚：

原代码的问题所在 #

你写的diaryUI是一个立即执行函数（IIFE），它在页面加载完成的瞬间就会自动执行。而你把检测单选框选中状态的for循环放在了这个IIFE的顶层——这时候用户还没来得及点击任何单选框呢！

所以循环执行时，没有任何单选框处于checked状态，emotionSelected自然就保持初始的undefined值，哪怕之后用户选了单选框，这个变量也不会再被更新了。而testVar是固定的字符串，不管什么时候访问都能返回正确值，所以你会看到返回的对象里只有test有值，emotion是undefined。

为什么移到getInput里就正常？ #

当你把for循环移到getInput方法内部后，这个循环只会在用户点击提交按钮、触发addEntry函数时才会执行——这时候用户已经完成了单选框的选择操作，循环就能正确找到被选中的单选框，拿到对应的value赋值给emotionSelected，自然就能返回正确的结果了。

修正后的代码示例 #

var diaryUI = (function() { 
  var testVar = "hello";

  return { 
    getInput: function() { 
      var emotionSelected;
      var emotionList = document.getElementsByName("emotion");
      for (var i = 0; i < emotionList.length; i++) { 
        if (emotionList[i].checked) { 
          emotionSelected = emotionList[i].value;
          break; 
        } 
      }
      return { 
        emotion: emotionSelected, 
        test: testVar 
      } 
    } 
  } 
})();

var mainController = (function(diaryUICtrl) { 
  var addEntry = function() { 
    var input = diaryUICtrl.getInput(); 
    console.log(input); 
  } 
  document.getElementById("submit-entry").addEventListener("click", addEntry); 
})(diaryUI);

内容的提问来源于stack exchange，提问作者catandmouse