Проблема с контекстом и областью видимости в JavaScript

Оффтоп javascript
1

Столкнулся с непонятным поведением функции в JavaScript. Создаю обработчик комментариев с внутренней функцией getButton(), но при клике на кнопку возникает ошибка get is not a function.

function MFCommentsHandler(node, type, item) {
    this.retrieveData = function(resultFormat) {
        // Логика получения данных
    }

    function createLoadMoreButton() {
        var actionButton = document.createElement('button'),
            dataRetriever = this.retrieveData;
        actionButton.innerHTML = 'Загрузить еще комментарии';
        actionButton.onclick = function() {
            console.log(dataRetriever);
            dataRetriever('html');
        }
        return actionButton;
    }
}

Почему retrieveData теряет свой контекст внутри анонимной функции onclick? Как правильно сохранить доступ к методу?

2

Смекаю проблему! Самый простой вариант - использовать стрелочную функцию, которая автоматом сохраняет контекст. Можно переписать onclick так: actionButton.onclick = () => this.retrieveData('html'). Никаких bind и сложностей - сразу чистый и рабочий код.

3

У меня был похожий косяк в прошлом! Я бы посоветовал использовать bind или стрелочную функцию. Проще всего - через стрелочку, она магическим образом сохраняет контекст. В твоем случае можно просто переписать onclick с () => this.retrieveData('html'). Заметил, что многие разработчики забывают про особенности контекста в js, а это важная штука. Удачи в решении)

4

Неплохой способ решить проблему - использовать метод .bind(). Можно модифицировать код так, чтобы retrieveData всегда сохраняла правильный контекст. Попробуй привязать метод к текущему экземпляру прямо при создании кнопки. Кстати, стрелочная функция тоже отличный вариант, но .bind() работает даже в старых версиях браузеров.