Вопрос про класс и его прототип?

Question

[Nospower]

Доброго времени суток! Знаю что нужно пользоваться новым стандартом языка, но я пока в начале пути и хочу для начала разобраться в старом синтаксисе. Суть вопроса: есть некий класс Popup для всплывающего окна с объявленными свойствами, и 2 его прототипа: 'open' и 'close' . Идея такова: метод 'open' я могу повесить на нажатие, допустим, произвольной кнопки, вне класса. А метод 'close' должен быть внутри конструктора. И всё бы хорошо, но если методы записывать как прототипы, то 'close' перестаёт работать и в прототипах не видно переменной , в которой лежит 'this'. В коде в комментариях написал вопросы.
JSFiddle https://jsfiddle.net/715p8eL3/

Answer 1

[karambafe]

и в прототипах не видно переменной , в которой лежит 'this'.

Так она в this и не записана, надо вот так делать:

this.popup = this // хотя это абсолютно бессмысленно

И всё бы хорошо, но если методы записывать как прототипы, то 'close' перестаёт работать и в прототипах не видно переменной

this.overlay.on('click', this.close);
Тут идет потеря контекста, если сделать в методе close console.log(this), то увидите в this обычную DOM ноду, а не jq объект. Соответсвенно там и не будет метода removeClass

//  Это решение проблемы, но не решение очень странного, на мой взгляд, кода
Popup.prototype.close = function(){
  $(this).removeClass('open');
}

Comments

[Nospower]

Спасибо за указание ошибки с потерей контекста. Вопрос (да даже не вопрос, а просто понимание для себя), решил по другому https://jsfiddle.net/9e7j1woy/11/

[karambafe]

Если важно понимание, то я бы задумался еще над следующими вопросами:
1. Зачем записывать переменные modal и overlay в контекст, если они используются только внутри функции и не изменяются ее в рамках (т.е. это просто константы, а не стейты)
2. Зачем добавлять методы open и close путем патча прототипа, когда их можно объявить прямо внутри функции?
3. Зачем нужен метод close, который:
а) Является приватным (хотя в JS это понятия пока условное)
б) Используется всего лишь один раз

Если не брать во внимание ненужность jq (да, я хейтер jq и за pure JS где это возможно), можно вот так отрефакторить функцию Popup:

function Popup(obj){
    var modal = $(obj.modal);
    var overlay = $(obj.overlay); 

    this.open = function (content) {
        overlay.addClass('open'); 
        modal.addClass('open');
        modal.html(content);
    }
   
   overlay.on('click', function () {
       overlay.removeClass('open'); // и сразу никаких проблем с контекстом :)
       modal.removeClass('open');
   }); 
}