Семантика свойства this.$pop

На сайте Читай-город используется функция function Popup (pop, name, html, handlers) в файле Читай-город - интернет-магазин книг_files\popup.js.Без названия, с помощью которой создается окно входа/регистрации (см. Объект (класс) Popup )

function Popup (pop, name, html, handlers) {
    if (html) {
        $(document.body).append(html);
    }
    handlers = handlers || {};
    this.$pop = $(pop);
    this.selector = pop;
    this.name = name;
    this.$pop_wrapper = this.$pop.parent('.js__popup_main_wrapper');

    Popup.instances[this.name] = this;
    this.$pop.on('click', '.popup__close, .js__popup__close', this.hide.bind(this));

    //Закрытие попапа при клике на маску и при нажатии Esc
    if (this.$pop_wrapper) {
        this.$pop_wrapper.on('click', function(event) {
            var mask_wrapper = event.target;
            if (mask_wrapper.classList.contains('js__popup_main_wrapper')) {
                Popup.hideAll();
            }
        });
    }

    $(document).keyup(function(event) {
        if (event.keyCode === 27) {
            Popup.hideAll();
        }
    });

    this.$body = this.$pop.find('.popup__body_text');

    this.onshow = handlers.show || null;
    this.onhide= handlers.hide || null;

    this.events = {
        closePopup: 'closePopup',
        openPopup: 'openPopup'
    }
}

Popup.instances = {};

Popup.getInstance = function(name, pop, html, handlers) {
    if(Popup.instances[name]){
        return Popup.instances[name];
    }

    if (pop){
        return new Popup(pop, name, html, handlers);
    }
    return null;
};
Popup.hideAll = function() {
    for (var popupName in Popup.instances) {
        if(Popup.instances.hasOwnProperty(popupName)){
            Popup.instances[popupName].hide();
        }
    }
};

Popup.prototype.show = function() {
    Popup.hideAll();

    //Скрываем скролл
    $('body').css('overflow', 'hidden');
    // временный костыль
    // почему-то не всегда инициализируется dom-элемент попапа
    if (!this.$pop.length) this.$pop = $(this.selector);
    if (!this.$pop.length) return;

    if (this.$pop_wrapper) {
        this.$pop_wrapper.css("display", "flex");
    }

    this.$pop
        .removeClass('hidden')
        .addClass('shown')
        .attr('data-opened', '');
    this.onshow ? this.onshow() : null;

    if (window.userCity && window.userCity.hideBlock) { //если открыт попап города(актуально для мобильной версии)
        //то закрыть блок выбора города
        window.userCity.hideBlock();
    }

    //создадим событие открытия попапа
    eventEmitter.dispatch(this.events.openPopup, {
        popupName: this.name,
        popup: this.$pop
    });
};

Popup.prototype.hide = function() {
    this.$pop
        .removeClass('shown')
        .addClass('hidden')
        .removeAttr('data-opened');
    this.onhide ? this.onhide() : null;

    if (this.$pop_wrapper) {
        this.$pop_wrapper.fadeOut(50);
    }

    var opened = $('[data-opened]').length;

    if (opened === 0) {
        //Возвращаем скролл
        $('body').css('overflow', 'auto');
    }

    eventEmitter.dispatch(this.events.closePopup, {
        popupName: this.name,
        popup: this.$pop
    });
};

Popup.prototype.setBodyText = function (text){
    if(!text){
        return;
    }

    this.$body.html(text);
};

Поясните

  1. значение свойства pop
  2. значение оператора this.$pop=$(pop)
  3. а также непонятен синтаксис this.$pop.on('click', '.popup__close, .js__popup__close', this.hide.bind(this));.

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

Автор решения: Pavel Grishaev

Судя только по предоставленному коду:

  1. pop - это аргумент jQuery, то есть элемент, селектор или html-строка с тегами, поскольку вкладывается далее в функцию $(). Но судя ниже по коду это селектор. Странно тогда что он так назван.
  2. $pop - это стандартный способ указать, что в нём содержится объект jQuery - коллекция элементов или один элемент, "обёрнутые" в jQuery. Доллар тут просто для удобства понимания. this - экземпляр, который получится после запуска конструктора Popup с оператором new. this.$pop - свойство этого экземпляра.
  3. Метод on может иметь разное количество аргументов. Если как у вас, то второй аргумент означает селектор дочерних элементов, на которых срабатывает событие, в отличие от обычного метода, когда событие срабатывает на элементе, для которого вызывается. Метод bind служит для привязки this внутри метода к экземпляру. Без него метод hide будет работать иначе - this внутри него будет изменчивым, в зависимости от того, как он вызывается. В данном конкретном случае он например может быть равен элементу с селектором .popup__close, согласно документации jQuery о делегированных обработчиках событий для метода on. А так this в нём будет всегда указывать на экземпляр попапа.
→ Ссылка