JQuery传递$(this)至预定义函数返回undefined问题咨询

核心原因 #

1. 箭头函数的this绑定问题
   箭头函数不会创建自身的this上下文，它的this完全继承自外层词法作用域。所以在事件回调的箭头函数里写$(this)，拿到的根本不是触发事件的DOM元素，自然会返回undefined。

2. 函数引用与立即调用混淆
   如果直接写$('.checkbox').change(clickedRows($(this)))，这是立即执行clickedRows函数，把它的返回值当作事件回调。如果函数没有返回可执行的函数，就会出现“name is not a function”错误——你传的不是函数，是函数执行后的结果（大概率是undefined）。

3. 错误传递参数的时机
   即使尝试传递event.currentTarget或DOM元素，如果传递时机不对（比如在箭头函数里错误引用this），或者函数内部没有正确处理传入的参数，也会导致拿不到正确的行数据。

可行解决方案 #

方案1：直接传递函数引用（推荐，最简洁） #

jQuery会自动把事件回调的this绑定到触发事件的DOM元素，直接把预定义函数作为回调传入即可：

// 绑定事件
$('.checkbox').change(clickCheckbox);

// 预定义函数
function clickCheckbox() {
  // 这里的this就是触发事件的checkbox元素
  const $row = $(this).closest('tr');
  const rowData = $row.data('row'); // 假设行数据存在data属性里
  const rowIndex = $row.index();
  // 后续业务逻辑
}

方案2：通过事件对象传递目标元素（适合需要额外参数的场景） #

如果需要给函数传其他参数，用普通函数作为中间回调，通过事件对象拿到目标元素：

$('.checkbox').change(function(e) {
  // e.currentTarget是绑定事件的元素（和this一致），e.target是实际触发的元素
  clickCheckbox(e.currentTarget, '额外参数1', '额外参数2');
});

function clickCheckbox(el, arg1, arg2) {
  const $row = $(el).closest('tr');
  // 处理逻辑
}

方案3：箭头函数配合事件对象（如果一定要用箭头函数） #

箭头函数里通过e.target获取触发元素，再传给预定义函数：

$('.checkbox').change(e => clickCheckbox(e.target));

function clickCheckbox(el) {
  const $row = $(el).closest('tr');
  // 处理逻辑
}

需要学习的相关知识点 #

• jQuery事件回调的this绑定规则：jQuery在触发事件时，会将回调函数的this绑定到触发事件的DOM元素（和原生DOM事件的this规则一致）。
• 箭头函数的this特性：箭头函数没有独立的this，它的this由外层词法作用域决定，不能通过call/apply/bind修改。
• 函数引用与函数调用的区别：func是函数引用（可作为回调），func()是立即执行函数（返回结果作为值）。
• DOM事件对象的属性：event.target（实际触发事件的元素）、event.currentTarget（绑定事件的元素）的区别与使用场景。

内容的提问来源于stack exchange，提问作者Dennis van Burk