Question

我试图使用TypeScript扩展HTMLElement。下面是我的代码，它提醒undefined因为“this”返回一个窗口对象，这似乎是正确的。如何以类似的方式访问调用的HTMLElement？

interface HTMLElement {
    setData(dataObject: any): void;
}

HTMLElement.prototype.setData = (dataObject: any) => {
        alert(this.id); //Undefined
        alert(this); //Window Object
}

var data = { "InHouse": "5", "BookedMtd": "105" }
document.getElementById("infobartemplate").setData(data);

更新：通过将代码更改为：

来使其工作

HTMLElement.prototype.setData = function (dataObject: any): void {
        alert(this.id);
}

不确定区别是什么。我虽然也是一样。

Answer 1

那是因为你正在使用的lambda语法通过使用一个名为_this的变量将这个值保存到外部，你可以在操场上看到： http://past.is/wxBJm

由于lambda不在类中，因此它绑定到全局的“this”，这里是window对象。

通过使用函数语法，您可以保持javascript行为，因此这将绑定到属性访问（点表示法）左侧的对象。

但我认为你不应该直接使用typescript中的原型来为类添加方法。

在TypeScript中扩展HTMLElement

1 个答案: