Question

当我在构造函数中添加此代码时（import string是类的方法）：

start

TypeScript非常聪明，可以在回调中知道这种变化的上下文：

document.getElementById("test").addEventListener, event => {
    this.start();
};

但是，当我将其更改为使用var _this = this; document.getElementById("test").addEventListener, function (event) { _this.start(); };时，$("#test").click不再保留在辅助变量中，代码将会中断：

this

在前面的示例中，TypeScript是如何正常工作的，但在后者中却没有？

Answer 1

这是因为其中一个是arrow function ...

document.getElementById("test").addEventListener(event => {
    this.start();
});

......另一个是使用函数表达式......

$("#test").on("click", function() {
    this.start();
});

要解决此问题，请将回调更改为箭头功能：

$("#test").on("click", () => {
    this.start();
});

Answer 2

这是按照设计的。 TypeScript在箭头函数中绑定对包含类的this引用，但在this函数中使用function(){}的JavaScript含义。请参见下文，http://piotrwalat.net/arrow-function-expressions-in-typescript/。换句话说，问题不在于addEventListener与.on('click')语法，而在第二种情况下，您使用的是function(){}而不是箭头函数。

TypeScript和此上下文检测

2 个答案: