Question

我目前正在开发一个小的Typescript项目，我在尝试将事件绑定到HTMLElement时遇到了一些困难。我已经查看了各种问题和答案，但我没有一个真正帮助过我......

这是一个最小的工作示例：

class X {
    constructor(a: HTMLElement) {
        var _this0 = this; // class X, OK
        a.addEventListener('click', (ev: MouseEvent) => {
            var _this1 = this; // class X, why?
        });
        a.addEventListener('click', function (ev: MouseEvent) {
            var _this2 = this; // any... I assume HTMLElement (a)?
        });
    }
};

我不明白为什么_this1类型为X而类型为HTMLElement（或any）？它似乎适用于标准的javascript function，但不适用于Typescript lambda语法。

Answer 1

我已注释您的代码以解释this。

class X {
    constructor(a: HTMLElement) {
        var _this0 = this; // class X, OK
        a.addEventListener('click', (ev: MouseEvent) => {

            // Because you have used an arrow function
            // () => { }
            // Use of "this" within this function will
            // mean the original lexical scope, "class X"

            var _this1 = this; // class X, why ?
        });
        a.addEventListener('click', function (ev: MouseEvent) {

            // Because you have used a function
            // function () { }
            // The function will be scoped within the context it
            // it calls, for an event, it will be the event target

            var _this2 = this; // any... I assume HTMLElement (a) ?
        });
    }
};

基本上，使用箭头函数可以保留词法范围（这意味着函数内的范围保持不变，这不是JavaScript中的常见情况）。

所以当你写：

    a.addEventListener('click', (ev: MouseEvent) => {
        var x = this;
    });

编译为：

    var _this = this;
    a.addEventListener('click', function (ev) {
        var x = _this;
    });

通过TypeScript编译器。

如果您同时需要原始this和内容this，则可以使用：

    var _self = this;
    a.addEventListener('click', function (ev: MouseEvent) {
        var x = this; // The event target
        var y = _self; // class X
    });

理解＆＃34;这个＆＃34;带有事件绑定的Typescript中的关键字

1 个答案: