@OZKA

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

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

"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);

   
})();


Вопрос: почему и что нужно почитать, чтобы понять смысл?
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
@abberati
frontend-разработчик
Это происходит из-за того, что this указывает на контекст вызова, а не контекст объявления. То есть в разных ситуациях this — это разные сущности. Почитать вот это.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы