Передача аргумента в анонимную функцию

Question

Мне понадобилось сделать на JS модальное окно с перекрытием заднего плана. Я создал класс для этого модального окна, он создает окно примерно такое

<div id="id_main" class="style_main">
  <div id="id_close" class="style_close" onClick=function(){//action here}>
    X
  </div>
  <div id="id_content" class="style_content">
    <!-- Insert your content here -->
  </div>
</div>

Сам класс:

 class modalDialog {

    constructor(id, style, overflow_class){
        this._dialog=document.createElement('div'); // контейнер диалога
        this._closeBtn=document.createElement('div'); // блок для кнопки закрытия диалога
        this._content=document.createElement('div'); // блок для контента
        this._overflow=document.createElement('div'); // блок для заливки экрана при открытии модального окна

        this._dialog.setAttribute("id", id+"_main");    
        this._dialog.className=style+"_main"; //стиль модального окна

        this._content.setAttribute("id", id+"_content");
        this._content.className=style+"_content"; //стиль блока контента

        this. _closeBtn.className=style+"_close"; // стиль кнопки закрытия
        this. _closeBtn.innerText="X";

        ///******* комментарий, чтобы не потерять обработчик событий onclick на блоке close *********
        this._closeBtn.onclick=function(){        
            this.parentNode.remove(); // удаляем родительский блок _dialog
            //????????  удалить _overflow
        }; // навешиваем событие на кнопку*/


        this._dialog.append(this._closeBtn);
        this._dialog.append(this._content);

        document.body.append(this._dialog);
        this._overflow.className = overflow_class; // добавляем заливку
        document.body.append(this._overflow);
    }
    open() {
        this._dialog.style.top="50%"; // выравниваем модальное окно в середину окна
    }
    getContent(){
        return this._content;
    }
    // обновить содержимое блока content
    refreshContent(content){

        this.clearContent();
        this._content.append(...content); // добавляем данные от внешней функции
    }
    //очистить содержимое content
    clearContent(){
        while (this._content.firstChild) {
            this._content.firstChild.remove();
        }
    }
}

Теперь собственно вопрос, мне надо в анонимной функции, которая вешается на onclick блока _closeBtn сделать _overflow.remove(), но в анонимной функции у меня нет доступа к _overflow. Как мне навесить на onclick обработчик в котором я мог бы получать доступ к _overflow? Можно ли вообще передать в анонимную функцию, которую мы навешиваем на элемент какой-либо параметр?

P.S. Я делал _overflow глобальным все естественно работает, но по-моему это не очень хороший подход, когда функция зависит от глобальных переменных.

Answer 1

Есть три основных подхода.

Мне больше всего нравится третий.

// с помощью замыкания.
function buttonClick1(btn) {
  this._closeBtn = btn;
  const that = this;
  this._closeBtn.onclick = function() {
    that._closeBtn.remove();
  };
}
// с помощтю метода bind
function buttonClick2(btn) {
  this._closeBtn = btn;

  function onCloseBtnClick() {
    this._closeBtn.remove();
  };
  this._closeBtn.onclick = onCloseBtnClick.bind(this);
}
// с помощью стрелочной функции.
function buttonClick3(btn) {
  this._closeBtn = btn;
  this._closeBtn.onclick = () => {
    this._closeBtn.remove();
  };
}

new buttonClick1(btn1);
new buttonClick2(btn2);
new buttonClick3(btn3);

<button id="btn1"> button 1</button>
<button id="btn2"> button 2</button>
<button id="btn3"> button 3</button>

БЛОГ НА HUSL

Передача аргумента в анонимную функцию

Ответы (1 шт):