javascript - 在函数中调用时变量始终未定义

Question

在回答我的问题之前，这是我的 Typescript 类:

export class Info {

    private currentId: number;

    private addToListButton: HTMLInputElement;

    constructor() {
        this.currentId = +(<HTMLInputElement> document.getElementById("Example")).value;

        this.addToListButton = <HTMLInputElement> document.getElementById("addToList");

        this.registerEvents();
    }

    private registerEvents(): void {
        this.addToListButton.addEventListener("click", (() => this.addToList()));
    }

    private addToList(): void {
        var data: SomeModel;
        data.id = this.currentId;

        // ajax stuff
    }
}

我的问题是当我想获取模型的“currentId”时，它总是未定义。我可以在同一个函数中使用另一个变量“addToListButton”而不会出现问题。

我看不出那里有什么问题。

感谢您的帮助!

Answer 1

函数addToList中的关键字this在调用函数时没有引用类Info的实例this.addToListButton.addEventListener("click", (() => this.addToList()));.

要让 this 引用实例，请使用箭头函数:

private const addToList = (): void => { // Arrow function
  var data: SomeModel;
  data.id = this.currentId;

  // ajax stuff
}

Here是关于什么是箭头函数的一些解释。