如何在JavaScript类+jQuery事件中同时访问类实例与触发元素？

下面提供三种实用方案，解决你在事件绑定中同时获取类实例属性和触发事件的jQuery元素的问题：

方法1：箭头函数包装处理逻辑 #

箭头函数不会绑定自身的this，会自动沿用外层作用域的this（也就是MyClass的实例），同时通过事件对象e的currentTarget获取触发事件的DOM元素，转成jQuery对象即可。

class MyClass{
    constructor() {
        this.myProperty = 10;
    }
    
    init(){
        $(".my-items").on('click', (e) => {
            this.myMethod(e);
        });
    }
    
    myMethod(e){
        // 访问类实例的属性
        console.log(this.myProperty); // 输出 10
        // 获取触发事件的jQuery元素
        const $clickedItem = $(e.currentTarget);
        console.log($clickedItem); // 点击的.my-items元素
    }
}

方法2：bind绑定类实例，通过事件对象拿元素 #

用bind(this)把myMethod的this固定为类实例，然后在方法里通过事件参数e的currentTarget（或target）获取触发事件的DOM元素，转成jQuery对象就能使用。

class MyClass{
    constructor() {
        this.myProperty = 10;
    }
    
    init(){
        $(".my-items").on('click', this.myMethod.bind(this));
    }
    
    myMethod(e){
        // 访问类实例的属性
        console.log(this.myProperty); // 输出 10
        // 获取触发事件的jQuery元素
        const $clickedItem = $(e.currentTarget);
        console.log($clickedItem); // 点击的.my-items元素
    }
}

方法3：缓存类实例引用（传统写法） #

在init里把类实例存到变量self中，用普通函数作为事件处理函数，里面既可以通过self访问类实例属性，又能直接用$(this)获取触发事件的元素。

class MyClass{
    constructor() {
        this.myProperty = 10;
    }
    
    init(){
        const self = this;
        $(".my-items").on('click', function() {
            // 访问类实例的属性
            console.log(self.myProperty); // 输出 10
            // 获取触发事件的jQuery元素
            console.log($(this)); // 点击的.my-items元素
        });
    }
}

推荐优先使用方法1或方法2，它们更符合现代JavaScript的写法，代码更简洁易维护。

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