TypeScript类中this实例未定义，执行代码报toggle赋值空错误

这个错误的核心原因是函数上下文丢失：当你把this.loop传给requestAnimationFrame时，该方法会脱离你的HomeUtils实例上下文执行，此时this不再指向你的类实例，而是变成了null（严格模式下）或者全局对象，自然就找不到toggle属性了。

下面给你三种可行的修复方案：

方案1：在构造函数中绑定上下文 #

在类的构造函数里，手动把loop方法的this绑定到当前实例，确保后续调用时上下文不会丢失：

@Injectable()
export class HomeUtils {
    private canvas: HTMLCanvasElement;
    private context;
    private toggle = true;

    constructor() {
        // 绑定loop的上下文到当前实例
        this.loop = this.loop.bind(this);
    }

    // ... 其他方法保持不变
}

方案2：用箭头函数定义loop方法 #

箭头函数会自动捕获当前类实例的上下文，天生不会出现上下文丢失的问题，写法更简洁：

@Injectable()
export class HomeUtils {
    private canvas: HTMLCanvasElement;
    private context;
    private toggle = true;

    constructor() { }

    // 改用箭头函数定义loop
    private loop = () => {
        this.toggle = false;
        if (this.toggle) {
            requestAnimationFrame(this.loop);
            return;
        }
        this.noise();
        requestAnimationFrame(this.loop);
    }

    // ... 其他方法保持不变
}

方案3：调用requestAnimationFrame时用箭头函数包裹 #

每次调用requestAnimationFrame时，用箭头函数包裹this.loop调用，临时确保上下文正确：

private loop() {
    this.toggle = false;
    if (this.toggle) {
        requestAnimationFrame(() => this.loop());
        return;
    }
    this.noise();
    requestAnimationFrame(() => this.loop());
}

额外小提示 #

你的loop方法里还有个逻辑小问题：this.toggle = false;之后立刻判断if (this.toggle)，这个条件永远不会成立，相当于直接跳过了分支里的逻辑。如果你的本意是控制动画的启停，可能需要调整这个逻辑，比如把toggle的赋值和判断逻辑反过来，或者用它来做开关控制。

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