JavaScript中setInterval无法每秒更新alpha值的问题

问题核心在于setInterval的回调函数使用普通function时，this的上下文并非Lightning类的实例，而是全局对象（浏览器环境下为window），因此你修改的不是实例的alpha属性，自然看不到变化。

以下是三种可行的修复方案：

方案1：使用箭头函数 #

箭头函数不会绑定自身的this，会继承外层作用域的this（即update方法中的Lightning实例）：

update(){
    //should cause lightning incrementally
    setInterval(() => {
        this.alpha += 0.1;
        console.log("hi");
    }, 1000);
}

方案2：提前保存实例的this引用 #

在setInterval外部将实例的this赋值给变量，回调中使用该变量访问实例属性：

update(){
    const self = this;
    setInterval(function() {
        self.alpha += 0.1;
        console.log("hi");
    }, 1000);
}

方案3：用bind绑定this到回调函数 #

通过bind方法强制将回调的this绑定为Lightning实例：

update(){
    setInterval(function() {
        this.alpha += 0.1;
        console.log("hi");
    }.bind(this), 1000);
}

额外优化建议 #

每次调用update都会创建新的定时器，可能导致多个定时器同时运行，使alpha增长超出预期。建议在类中保存定时器ID，调用update时先清除旧定时器：

export class Lightning{
    constructor(game){
        this.game = game;
        this.width = 640;
        this.height = 480;
        this.alpha = 0.0;
        this.timer = null; // 存储定时器ID
    }
    update(){
        // 清除已有定时器，避免重复创建
        if(this.timer) clearInterval(this.timer);
        this.timer = setInterval(() => {
            this.alpha += 0.1;
            // 限制alpha最大值不超过1.0
            if(this.alpha > 1.0) this.alpha = 1.0;
            console.log("hi");
        }, 1000);
    }
    draw(context){
        context.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
        context.fillRect(0, 0, this.width, this.height);
    }
}

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