JavaScript 中怎么在 jQuery 回调中找回正确的 this-js教程-PHP中文网

jquery回调中this指向dom元素而非外层对象，解决方法包括：①缓存this（var self = this）；②箭头函数继承词法作用域；③bind()或$.proxy()显式绑定。

javascript 中怎么在 jquery 回调中找回正确的 this

在 jQuery 回调中，this 通常指向被操作的 DOM 元素（比如 $('button').click(function(){...}) 中的 this 是那个 button），而不是你期望的外层对象（比如某个类实例或模块作用域）。这不是 bug，而是 JavaScript 函数执行上下文的自然行为。找回“想要的 this”关键在于**提前保存引用**或**正确绑定上下文**。

用变量缓存外层 this（最常用、兼容性最好）

在进入 jQuery 回调前，把当前需要的 this 赋给一个局部变量（如 self、that 或 me），回调里直接使用它：

var MyModule = {
  name: 'test',
  init: function() {
    var self = this; // ← 缓存 this
    $('#btn').on('click', function() {
      console.log(self.name); // ✅ 正确输出 'test'
      console.log(this);      // ? 是 button 元素（原生）
    });
  }
};

用箭头函数（ES6+，简洁但注意 jQuery 版本和环境）

箭头函数不绑定自己的 this，而是继承外层词法作用域的 this。适用于现代环境且 jQuery 方法支持传入箭头函数（如 .on()、.each() 等）：

class Handler {
  constructor() {
    this.id = 123;
  }
  bindEvent() {
    $('#item').click(() => { // ← 箭头函数自动捕获外层 this
      console.log(this.id); // ✅ 输出 123
      console.log(this);    // ✅ 是 Handler 实例
    });
  }
}

⚠ 注意：jQuery 的某些老方法（如 .animate() 的 complete 回调）可能不支持直接传箭头函数作为回调，需查文档或降级为普通函数 + 缓存。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 `.bind()` 显式绑定 this

调用回调前用 Function.prototype.bind() 固定 this 值：

$('#btn').click(handler.handleClick.bind(this));
适合封装独立方法，且想复用该处理函数
缺点是每次绑定都创建新函数，可能影响性能（一般场景可忽略）

用 jQuery 的 `$.proxy()`（jQuery 专用，语义清晰）

jQuery 提供的工具方法，等价于 bind，但更直观：

$('#btn').click($.proxy(function() {
  console.log(this.id); // ✅ this 指向你传入的对象
}, this));

也可写成：$.proxy(this.handleClick, this)，常用于事件委托或延迟调用场景。

本质上没有“找回”this 这回事——JavaScript 的 this 从来都是由调用方式决定的。所谓“找回”，其实是主动控制回调执行时的上下文。选哪种方式取决于你的环境、代码风格和团队规范：老项目优先用 var self = this；新项目可放心用箭头函数或 bind；用 jQuery 生态较深时 $.proxy 也很自然。