本文总结了JavaScript中将函数作为参数传递时的常见错误。通过addEventListener示例，分析了直接调用函数与传递函数引用的区别，并提供了使用匿名函数和返回函数的两种正确传参方法，帮助开发者避免立即执行陷阱。
函数作为参数传递的常见误区
今日在通过addEventListener为元素绑定事件时，发现了一个关于将函数作为参数传递的问题。此前也曾遇到类似情况，因此有必要进行总结。首先观察以下代码片段，思考其是否存在逻辑错误：当点击ID为id3的元素时，能否成功弹出该元素的ID值？
示例1
var obj3=document.getElementById('id3');
obj3.addEventListener('click',curClick('id1'),true);
function curClick(id){
alert(id);
} 答案是否定的，无法达到预期效果。原因在于这行代码在页面加载完成时就会立即执行并弹出id3。因此，当用户后续单击id3对应的元素时，页面没有任何反应。
正确的函数传参解决方案
随后，我将代码修改为以下两种情形：
示例2
var obj3=document.getElementById('id3');
obj3.addEventListener('click',function(e){curClick('id3');stopPropagation(e)},true);
function curClick(id){
alert(id);
}
示例3
var obj1=document.getElementById('id1');
obj1.addEventListener('click',curClick1,true);
function curClick1(){
alert('okey');
} 这次执行结果正常了，这是为什么呢？
在JavaScript中，curClick('id3')表示直接调用该函数，而非将其作为参数传递。若要将函数作为参数传递，且无需传递额外参数，直接传递函数名即可；若需要传递参数，则有两种解决方案。
方法一：利用匿名函数，将目标函数包裹在匿名函数内部，并将该匿名函数作为参数传递，如示例2所示。
例如：将function(){myfunction(val1,val2,......);}作为参数传递。
方法二：改写需要传递的函数。
function curClick1(val){
<span style="white-space:pre"> </span>return function(){
alert(val);
};
} 以上关于JavaScript中将函数作为另一函数参数传递方法的总结就是全部内容，希望能对大家有所帮助，也希望大家多多支持本站。