0

Существует такой ООП код для вызова модальных окон с разных страниц сайта. Столкнулся с проблемой, что код не работает в 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');

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

Bharatha
  • 5,264
uzi_no_uzi
  • 2,186
  • 2
    а если пойти по пути меньшего сопротивления, и чем во всем проекте менять стрелочные(кто знает, сколько их там еще окажется?) и подключить webpack с бабелем на ес5?тогда сможете писать продолжая использовать стрелочные, и этот рефакторинг не понадобится. – Silento Jun 02 '18 at 07:47

1 Answers1

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');
    }
}

Прошу прощения если где то ошибся, накидал по памяти на коленке, уже давненько этим не пользовался.

А вообще, как и написал в комментарии к вопросу, подумайте о том, не проще ли просто подключить babel?

Silento
  • 2,853