Почему функции(методы) модуля (шаблон проектирования Модуль) не могут использоваться в обработчиках событий?

Question

[Лёва]

Есть следующий, очень простой, на первый взгляд, код:

"use strict";
let TaskModule = (function () {
    return {
        msg: function () {
            return "Hello World!";
        }, 
        showMsg: function () {
            alert(this.msg());
        },
        doTask: function () {
            this.showMsg(); //Строка №11
        }      
    }
})();
(function() {
    let addButtonElement = document.getElementById("add-task-btn");
    addButtonElement.addEventListener("click", TaskModule.doTask, true); 
})();

Но, когда происходит событие нажатия кнопки, в консоли разработчика выводится следующее сообщение:

Uncaught TypeError: this.showMsg is not a function
at HTMLInputElement.doTask (main.js:11)

Однако, если мы вызываем функцию модуля через функцию "обертку" и именно имя функции "враппера" передаем в обработчик события, то все работает как надо:

"use strict";
let TaskModule = (function () {
    return {
        msg: function () {
            return "Hello World!";
        }, 
        showMsg: function () {
            alert(this.msg());
        },
        doTask: function () {
            this.showMsg();
        }      
    }
})();
(function() {
    let addButtonElement = document.getElementById("add-task-btn");
    let doTaskFn = function() {
        TaskModule.doTask();
    }
    addButtonElement.addEventListener("click", doTaskFn, true);

   
})();

Вопрос: почему и что нужно почитать, чтобы понять смысл?

Comments

[Максим Федоров]

видимо из-за того, что в первом случае функция выполняется во время инициализации (он выполнился ДО самого клика корректно), а при событии уже идет обращение к исполненному коду
во втором случае идет отложенный вызов — вы повесили функцию, которая сработает именно при клике

я не JS прогер, но с виду так кажется... буду рад увидеть ответ, что это так или не так и почему

[fixeri]

теряется контекст, смотрите что в логах - вызовите console.log(this) в функции doTask

чтобы передать конекст используйте bind

(function() {
			    let addButtonElement = document.getElementById("add-task-btn");
			    addButtonElement.addEventListener("click", TaskModule.doTask.bind(TaskModule), true); 
			})();

Answer 1

[abberati]

Это происходит из-за того, что this указывает на контекст вызова, а не контекст объявления. То есть в разных ситуациях this — это разные сущности. Почитать вот это.