JavaScript中回调函数（callback function）的参数是如何工作的？

问题1：回调函数如何知晓需要将event对象传入对应的参数？ #

回调函数本身只是普通的函数定义，完全不知道自己需要接收什么参数。参数是调用回调函数的那一方决定的：

• 事件绑定的场景下，浏览器内核的事件触发逻辑是回调的调用方，当点击事件触发时，浏览器会先构造好包含点击坐标、触发元素等信息的event对象，主动把这个对象作为第一个参数传入你定义的回调函数。
• 数组map方法的场景下，Array.prototype.map的内置实现是回调的调用方，遍历到数组的每一项时，会主动把当前遍历元素、当前索引、原数组三个参数按顺序传入你定义的回调函数。

问题2：如果回调函数没有声明接收参数，传入的event对象会去向何处？ #

JavaScript中函数的实参个数和形参个数不需要匹配：

• 如果你没有声明对应的形参，传入的参数依然存在，你可以通过函数内的arguments类数组对象获取到所有传入的实参。
• 如果你没有主动使用这些传入的实参，这些值会被直接回收，不会产生额外的副作用。

举个例子，下面的代码依然可以拿到event对象：

document.addEventListener("click", function (){
  // arguments[0]就是浏览器传入的event对象
  console.log(arguments[0])
})

问题3：如何编写自定义函数，实现向回调函数的参数传递对应值的能力？ #

你只需要在自己的函数逻辑里，主动调用传入的回调函数，同时按约定把对应的值作为参数传给回调即可。以下是简单示例：

// 自定义一个遍历数组的函数，支持传入回调
function myArrayTraverse(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    // 按顺序传入三个参数：当前元素、当前索引、原数组
    callback(arr[i], i, arr)
  }
}

// 使用自定义函数
const nums = [10, 20, 30]
myArrayTraverse(nums, function(item, index) {
  console.log(`索引${index}对应的元素是${item}`)
})

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