在函數中調用變量時始終未定義

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

當在此處this.addToListButton.addEventListener("click", (() => this.addToList()));函數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
}

以下是有關箭頭功能的一些說明。

Answer 2

在addToList()方法中，關鍵字this指事件上下文，而不是Info對象上下文。

要以這種方式使用，您需要將方法綁定到類。 將此添加到構造函數中：

this.addToList = this.addToList.bind(this);