JavaScript中操作div和绑定input事件时this指向不一致是什么原因

问题成因解答 #

1. generateRandomNumber方法中this指向Complement实例的原因 #

JS中普通函数的this遵循调用时绑定规则：谁作为调用主体触发函数，this就指向谁。你的代码中是通过complement.generateRandomNumber()的形式调用方法，调用主体是Complement类的实例complement，因此方法内部的this自然绑定到该实例上，所以可以直接访问到实例上挂载的firstInt等DOM属性。

2. checkFields方法中this指向input元素的原因 #

浏览器DOM事件回调有默认的this绑定规则：当你把函数直接作为事件回调传给addEventListener时，事件触发后回调函数的this会被自动绑定到触发当前事件的DOM元素本身。你在绑定keyup事件时直接传入了this.checkFields，触发事件的主体是input元素，因此回调里的this就指向这个input。

如果你需要让checkFields的this指向Complement实例，可以任选以下方案修改： #

• 绑定事件时用bind手动固定this指向：

events = function(){
  this.secondInt.addEventListener('keyup', this.checkFields.bind(this))
}

• 用箭头函数改写checkFields，箭头函数的this继承定义时外层作用域的this，不会被事件绑定规则修改：

// 写在class内部的公有属性写法更推荐
class Complement{
  constructor(){
    // 原有逻辑不变
  }
  checkFields = () => {
    console.log(this) // 此时this指向Complement实例
    let secondIntInput = this.secondInt.value
    console.log(secondIntInput)
  }
}

• 事件回调外层包裹箭头函数：

events = function(){
  this.secondInt.addEventListener('keyup', (e) => this.checkFields(e))
}

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