在 TypeScript 中扩展 HTMLElement

Question

我正在尝试使用 TypeScript 扩展 HTMLElement。下面是我的代码，它警告未定义，因为 "this" returns 一个 window 对象，这似乎是正确的。如何以类似的方式访问调用方 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 的变量将 this 值保留为外部 this，正如您在操场上看到的那样： http://past.is/wxBJm

由于 lambda 不在 class 中，它绑定到全局的 "this"，这里是 window 对象。

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

但我认为您不应该直接使用打字稿中的原型向 class 添加方法。

在 TypeScript 中扩展 HTMLElement

Extending HTMLElement in TypeScript

undefined

extending

typescript