是否存在单个JS函数，调用时可返回被点击按钮对应的索引值0-3

你原来的实现思路存在两个问题：

• 重复声明同名的jon函数，后声明的会直接覆盖前面的，最终只会保留返回3的函数
• 直接写console.log(jon())是页面加载时就主动执行函数，和按钮点击事件完全无关，事件回调的返回值默认不会被自动捕获打印

方案1：通过DOM自定义属性传递索引 #

不需要修改函数结构，提前把对应索引存在按钮元素的自定义属性上，点击时直接读取即可：

// 替换成你实际的按钮选择器，获取到的clicks数组索引0~3对应四个按钮
const clicks = document.querySelectorAll('button');

// 单个通用处理函数
function jon(e) {
  const currentIndex = Number(e.currentTarget.dataset.btnIndex);
  console.log(currentIndex);
  return currentIndex;
}

// 批量绑定事件
for(let i = 0; i < clicks.length; i++) {
  // 给每个按钮存对应索引
  clicks[i].dataset.btnIndex = i;
  clicks[i].addEventListener('click', jon);
}

方案2：通过闭包固定索引 #

不需要修改DOM属性，利用闭包的特性在绑定事件时就固定住每个按钮对应的索引：

const clicks = document.querySelectorAll('button');

// 单个通用处理函数，返回实际的事件回调
function jon(index) {
  return function() {
    console.log(index);
    return index;
  }
}

// 批量绑定事件
for(let i = 0; i < clicks.length; i++) {
  clicks[i].addEventListener('click', jon(i));
}

以上两个方案都只定义了一个jon函数，点击对应按钮时就会输出0、1、2、3的对应索引值，满足你的需求。

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