JavaScript异常行为：checkInSessionTimout实例变量值在setInterval中无法保留

这是一个典型的 JavaScript 中this指向异常导致的实例变量丢失问题，我来帮你拆解并解决：

核心问题根源 #

当你直接把sessionTimeout.checkIdleTime作为参数传给setInterval时，这个方法会被当作独立函数调用，此时函数内部的this不再指向checkInSessionTimout的实例，而是指向全局对象（浏览器环境下是window）。所以你访问this._idleSecondsCounter和this.IDLE_TIMEOUT时，其实是在访问window上的属性，自然无法获取到实例原本的变量值。

另外，你绑定mousemove和keypress事件时，sessionTimeout.resetTimer也存在同样的this指向问题：当事件触发时，resetTimer里的this会指向触发事件的 DOM 元素，而不是实例，所以this._idleSecondsCounter = 0也无法正确重置实例的计数器。

解决方案：修正this指向 #

这里提供两种常用且可靠的修复方式：

方案1：使用箭头函数包裹调用（推荐，代码更直观）

箭头函数没有自己的this，它会继承外层作用域的this值，我们可以用箭头函数来包裹实例方法的调用，确保方法内部的this始终指向实例：

var _timer;
function addIdleCheckInMethod() {
    var sessionTimeout = new checkInSessionTimout(); //**code-CreateObject**
    // 修正事件绑定的this指向
    $(this).mousemove(() => sessionTimeout.resetTimer());
    $(this).keypress(() => sessionTimeout.resetTimer());
    
    // 用箭头函数包裹，确保checkIdleTime里的this指向实例
    _timer = setInterval(() => {
        sessionTimeout.checkIdleTime(onSessionExpire);
    }, 1000);
}
function onSessionExpire() {
    clearInterval(_timer);
    console.log('session expired!');
}
class checkInSessionTimout {
    constructor(args){
        this.IDLE_TIMEOUT = args != null && args.idleTimout ? args.idleTimout : 30;
        this._idleSecondsCounter = 0;
        console.log('constructor');
    }
    checkIdleTime(callback) {
        this._idleSecondsCounter++;
        console.log( "idle timeout: " + this.IDLE_TIMEOUT + ' counter: ' + this._idleSecondsCounter);
        if (this._idleSecondsCounter >= this.IDLE_TIMEOUT) {
            callback();
        }
    }
    resetTimer() {
        this._idleSecondsCounter = 0;
        console.log('reset:' + this._idleSecondsCounter);
    }
}

方案2：使用bind方法绑定this

通过bind方法可以永久把实例方法的this绑定到实例本身，确保无论怎么调用，方法内部的this都不会跑偏：

var _timer;
function addIdleCheckInMethod() {
    var sessionTimeout = new checkInSessionTimout(); //**code-CreateObject**
    // 绑定事件时，用bind把this固定为实例
    $(this).mousemove(sessionTimeout.resetTimer.bind(sessionTimeout));
    $(this).keypress(sessionTimeout.resetTimer.bind(sessionTimeout));
    
    // setInterval时，同样用bind绑定this
    _timer = setInterval(sessionTimeout.checkIdleTime.bind(sessionTimeout), 1000, onSessionExpire);
}
// 其余代码和原代码一致

验证效果 #

修改后，你会发现checkIdleTime方法里能正确打印实例的IDLE_TIMEOUT和_idleSecondsCounter值，鼠标移动或按键时也能正确重置计数器，超时后会触发onSessionExpire函数。

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