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

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);