Как можно заменить стрелочные функции в данном коде? [дубликат]

239

24 июня 2018, 09:10

На данный вопрос уже ответили:

Потеря контекста вызова 5 ответов

Существует такой ООП код для вызова модальных окон с разных страниц сайта. Столкнулся с проблемой, что код не работает в IE11.

Но оно и понятно, ведь IE и Opera(на самом деле работает) не поддерживает стрелочные функции.

function Modal(modalBlock, buttonClick, buttonClose) {
    this.modalBlock = document.querySelector(modalBlock);
    this.buttonClick =  document.querySelectorAll(buttonClick);
    this.modalClose = document.querySelector(buttonClose);
    this.currentClass = this.modalBlock.getAttribute('class');
    this.ready = this.modalBlock && this.buttonClick && this.modalClose;
    if (!this.ready) {
        return;
    }
    for (var i = 0; i < this.buttonClick.length; i++) {
        this.buttonClick[i].onclick = () => {
            if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == false) {
                this.modalBlock.classList.add(this.currentClass + '--active-js');
            }
        }
    }
    this.modalClose.onclick = () => {
        if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == true) {
            this.modalBlock.classList.remove(this.currentClass + '--active-js');
        }
    }
    this.modalBlock.onclick = (event) => {
        console.log(event);
        var contentCurrentClass = this.currentClass;
        if (event.target.classList.contains(contentCurrentClass + '--active-js') == true) {
            this.modalBlock.classList.remove(contentCurrentClass + '--active-js');
        }
    }
}
var appModal = new Modal('.modal-wrapper', '.button-openform--js', '.modal__close');
var videoModal = new Modal('.modal-wrapper', '.play-video', '.modal__close');
var appModalAccept = new Modal('.modal-wrapper', '.phone-number__accept', '.modal__close');
var appModalAcceptMain = new Modal('.modal-wrapper-two', '.phone-number__accept', '.modal__close--application');

Каким образом можно правильно заменить стрелочные функции на обычные? В ООП не силен, но насколько я понял, теряется контекст, если просто влепить туда анонимную функцию (Также буду очень благодарен, кто сможет дать хорошую статью по данному поводу, т.е. контекст в анонимных функциях и т.п.).

Answer 1

Одно из старых решений подобной проблемы является присвоение контекста в переменную self:

function Modal(modalBlock, buttonClick, buttonClose) {
var self = this;
.......
}

И затем, все this для onclick заменяете на self, примерно это будет выглядеть так:

this.modalClose.onclick = function() {
    if (self.modalBlock.classList.contains(this.currentClass + '--active-js') == true) {
        self.modalBlock.classList.remove(this.currentClass + '--active-js');
    }
}