JavaScript类中绑定jQuery事件方法的词法作用域问题

在jQuery的事件回调函数里，this默认指向触发事件的DOM元素（比如你的按钮），而非Counter类的实例，这就是调用this.add_to_value(1)失败的核心原因。以下是几种能保持类代码整洁的解决方案：

方法1：使用箭头函数 #

箭头函数不会绑定自身的this，它会继承外层作用域（此处为constructor）的this，也就是Counter类的实例：

class Counter{
    constructor(initial_value){
        this.value = initial_value
    
        this.counter_button = $('<button>+1</button>')
           .appendTo('body')
           .click(() => { // 改用箭头函数
               this.add_to_value(1) // 此处this指向Counter实例
           }) 
    }

    add_to_value(added_value){
        this.value += added_value
    } 
}

new Counter(10)

方法2：提前保存this到变量 #

在constructor里将当前实例的this存入一个变量（比如self），回调中通过该变量访问类方法：

class Counter{
    constructor(initial_value){
        const self = this; // 保存实例的this
        this.value = initial_value
    
        this.counter_button = $('<button>+1</button>')
           .appendTo('body')
           .click(function(){
               self.add_to_value(1) // 使用self访问Counter实例
           }) 
    }

    add_to_value(added_value){
        this.value += added_value
    } 
}

new Counter(10)

方法3：使用bind()绑定this #

通过bind()方法将回调函数的this强制绑定到Counter实例：

class Counter{
    constructor(initial_value){
        this.value = initial_value
    
        this.counter_button = $('<button>+1</button>')
           .appendTo('body')
           .click(function(){
               this.add_to_value(1)
           }.bind(this)) // 绑定this到Counter实例
    }

    add_to_value(added_value){
        this.value += added_value
    } 
}

new Counter(10)

方法4：将回调定义为类方法（适合复杂逻辑） #

如果事件处理逻辑较复杂，可将其抽为类的方法并绑定this，让代码结构更清晰：

class Counter{
    constructor(initial_value){
        this.value = initial_value
        // 绑定回调方法的this到实例
        this.handleButtonClick = this.handleButtonClick.bind(this)
    
        this.counter_button = $('<button>+1</button>')
           .appendTo('body')
           .click(this.handleButtonClick)
    }

    handleButtonClick(){
        this.add_to_value(1)
    }

    add_to_value(added_value){
        this.value += added_value
    } 
}

new Counter(10)

这些方案都能解决this指向问题，同时维持类结构的整洁。你可以根据代码复杂度选择合适的方式：箭头函数是最简洁的选项，抽成类方法的形式更利于后续功能扩展。

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