VS Code中调用UICtrl.getInput出现Uncaught TypeError错误求助

嘿，这个错误其实很好定位——你在定义controller这个立即执行函数（IIFE）的时候，明明设置了需要接收budgetCtrl和UICtrl两个参数，但最后调用这个IIFE的时候，根本没把你之前写好的budgetController和UIController传进去！这就导致函数内部的UICtrl变成了undefined，你再去调用它的getInput方法，自然就报错了。

问题的核心位置 #

看你代码的最后一行：

})();

这个IIFE没有传入任何实参，但它的定义是需要两个参数的：

var controller = (function(budgetCtrl, UICtrl){
  // ...内部逻辑
})();

修复方法超简单 #

只需要在调用IIFE的时候，把你已经定义好的两个控制器对象传进去就行：

})(budgetController, UIController);

修正后的完整JS代码 #

var budgetController = (function(){ })();
var UIController = (function(){
return {
getInput: function(){
return{
type: document.querySelector('.add-type').value, // inc or exp
description: document.querySelector('.add-description').value, // 修正了拼写错误
value: document.querySelector('.add-value').value
};
}
};
})();
var controller = (function(budgetCtrl, UICtrl){
var ctrlAddItem = function(){
var input = UICtrl.getInput();
console.log(input);
}
document.getElementById('button').addEventListener('click', ctrlAddItem);
document.addEventListener('keypress', function(event){
if(event.keyCode === 13 || event.which === 13) {ctrlAddItem();}
});
})(budgetController, UIController); // 传入两个控制器对象

另外多说一句：你在getInput返回的对象里，把description拼写成了decription，这个小拼写错误也建议一起修正，不然之后你想用这个属性的时候，又要踩坑啦~

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