Question

考虑这个简单的TS脚本

class foo {
    v: number = 1;

    public bar() {
        console.log(this.v);
    }
}

var a = new foo();
var b = new foo();

document.getElementById('test').addEventListener("click", a.bar);
document.getElementById('test').addEventListener("click", b.bar);

和HTML

<html lang="en">
<body>
    <button id="test">Test</button>
</body>
</html>

我希望得到2行控制台输出的数字＆＃34; 1＆＃34;。

但不！我得到一个undefined输出

让我们看一下生成的js文件

var foo = (function () {
    function foo() {
    this.v = 1;
    }
    foo.prototype.bar = function () {
        console.log(this.v);
    };
    return foo;
}());
var a = new foo();
var b = new foo();
document.getElementById('test').addEventListener("click", a.bar);
document.getElementById('test').addEventListener("click", b.bar);
//# sourceMappingURL=Test.js.map

为了性能考虑，TS决定将该功能放在原型上！所以addEventListener调用实际上是两次添加原型（静态）函数并且它是相同的实例。这就是为什么我只获得一个输出而不是两个输出。

最大的问题是原型函数中的this是指按钮而按钮并不包含名为v的属性！

如果我们在原生js中这样做

var foo = function () {
    this.v = 1;
    var that = this;
    this.bar = function () {
        console.log(that.v);
    }
}

var a = new foo();
var b = new foo();
document.getElementById('test').addEventListener("click", a.bar);
document.getElementById('test').addEventListener("click", b.bar);

我们会得到渴望的结果！

这是TS的已知问题，您不能将类方法用作事件处理程序吗？

我添加后如何删除该处理程序？

Answer 1

你可以。只是做：

 document.getElementById('test').addEventListener("click", () => a.bar());

Typescript方法与事件处理程序不兼容

1 个答案: