«Эта» область видимости проблема с жирной стрелкой в ​​Typescript

Question

В моем классе виджетов есть следующий код, который должен управлять всплывающим окном простой аутентификации.

private showPopupAuth(): void {

    //...just show() and hide() some stuff...

    this.getDiv().find('#cancel').unbind();
    this.getDiv().find('#cancel').click(() => {
        this.clearAuthPopups();                        
    });

    this.getDiv().find('#confirm').unbind();
    this.getDiv().find('#confirm').click(() => {

        let authRequest = new AuthRequest();    
        authRequest.userId = this.userId;
        authRequest.pw = this.getDiv().find('#pw').val();
        this.clearAuthPopups();

        //...do stuff...
    });
}

При нажатии кнопки отмены вызывается закрытая функция, которая закрывается, и она работает как положено. Нажав кнопку подтверждения, я получаю следующую ошибку в консоли

MyWidget.ts:460 Uncaught TypeError: Cannot read property 'userId' of undefined
    at HTMLButtonElement.<anonymous> (MyWidget.ts:460)
    at HTMLButtonElement.dispatch (jquery.js:3)
    at HTMLButtonElement.r.handle (jquery.js:3)

Если я попытаюсь отладить его и проверить Chrome> Источники> Окно области, я увижу это:

внутри отменить обратный звонок

• Локальный: this правильно указывает на MyWidget
• Закрытие (showPopupAuth): this правильно указывает на MyWidget

внутри подтверждение обратного вызова

• Локальный: this не определен
• Закрытие (showPopupAuth): this правильно указывает на MyWidget

Если я запускаю console.log(this) внутри showPopupAuth() и внутри двух обратных вызовов, которые я получаю, соответственно:

 >   console.log(this)
 <   MyWidget { ..., userId: "the-user-id", ...}

 >   console.log(this)
 <   <button id="cancel">Cancel</button>

 >   console.log(this)
 <   <button id="confirm">Ok</button>

Согласно консоли, this становится HTMLButtonElement, даже если я использую жирные стрелки в обоих обратных вызовах.

Почему это происходит? Что происходит? Похоже, что прицел и консоль говорят о двух разных вещах, и оба не имеют для меня никакого смысла.

---

Я знаю, что могу решить эту проблему, просто объявив let _this = this и использовать его внутри обратных вызовов, но я бы хотел понять суть проблемы.

Я уже прочитал TypeScript «эта» проблема с областью видимости при вызове в jquery callback , но она не отвечает на мой вопрос.

---

Обновление: как и предполагалось, я проверил сгенерированный JS, и все выглядит хорошо

MyWidget.prototype.showPopupAuth = function () {
    var _this = this;
    this.getDiv().find('#cancel').unbind();
    this.getDiv().find('#cancel').click(function () {
        _this.clearAuthPopups();
    });
    this.getDiv().find('#confirm').unbind();
    this.getDiv().find('#confirm').click(function () {
        var authRequest = new AuthServiceBeans_1.AuthRequest();
        authRequest.userId = _this.userId;
        authRequest.pw = _this.getDiv().find('#pw').val();
        _this.clearAuthPopups();
    });
};