使用jQuery绑定回调函数时对this指向的困惑

嘿，你的原生JavaScript this指向规则理解完全没问题！之所以会在jQuery的这段代码里看到this指向DOM元素，完全是jQuery框架内部做了特殊的绑定处理，不是你记错了原生规则哦～下面逐个解答你的疑问：

• 调用on函数时的this指向：你的理解是对的！$("ul")返回的是jQuery构造函数创建的实例对象，所以调用.on()方法时，这个方法内部的执行上下文this确实指向这个jQuery实例。

• 回调函数的执行上下文：没错，每一次函数调用都会生成新的执行上下文，this的指向核心还是取决于函数被调用的方式——而这里就是jQuery帮你改写了调用方式！

• on的回调this为何指向span？：如果是普通的callback()直接独立调用，this确实会指向全局对象（严格模式下是undefined）。但jQuery在触发点击回调的时候，并不是直接这么调用的。它内部会用类似callback.call(触发事件的DOM元素, event)的方式执行回调，手动把this绑定到触发当前事件的那个span元素上。这是jQuery事件绑定的设计初衷：让开发者在回调里能直接用$(this)拿到触发事件的目标DOM元素，省去通过event.target额外处理的步骤。

• fadeOut回调的this为何指向li？：和上面的逻辑一致！jQuery的动画方法（比如fadeOut、slideUp等）在执行完成后的回调里，会把this绑定到执行该动画的DOM元素上。这里$(this).parent()选中了span的父元素li，调用fadeOut后，回调执行时jQuery会通过call()把this绑定到这个li元素上，所以你在回调里的$(this)就是这个li，直接调用remove()就能删除它。

额外验证：模拟jQuery的绑定逻辑 #

你可以用原生JS写个简单的模拟，就能明白这个原理：

// 模拟jQuery的事件绑定逻辑
function myOn(eventName, selector, callback) {
  const target = document.querySelector(selector);
  target.addEventListener(eventName, function(event) {
    // 手动将回调的this绑定到触发事件的元素
    callback.call(this, event);
  });
}

// 调用测试
myOn("click", "span", function(event) {
  console.log(this); // 这里的this就会指向被点击的span元素
});

总结一下：你的原生this规则理解完全正确，jQuery只是为了提升开发者体验，在内部帮我们做了this的绑定处理，让回调里的this直接指向我们操作的DOM元素，不用再额外手动绑定啦～

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