Как переделать класс из ES5 в ES6?

Question

[Returb0]

Попытался переделать ES5 под стандарт ES6, то что-то пошло не так, а где ошибка понять не могу.
Может быть кто разбирается в данном стандарте и построении классов в частности

Исходник "класса" на ES5:

function Popup(options){
    this.modal = $("options.modal");
    this.overlay = $("options.overlay");
    var self = this;

    this.open = function(content){
        self.modal.html(content);
        self.modal.addClass("open");
        self.overlay.addClass("open");
    }
    this.close = function(){
        self.modal.removeClass("open");
        self.overlay.removeClass("open");
    }

    this.overlay.on("click", this.close);
}



var p = new Popup({
    modal: ".modal",
    overlay: ".overlay"
});

$(".write").on("click", function(){
    p.open("TEXT");
})

Моя неудачная попытка переделать класс на ES6:

class Popup{
  constructor(options){
    this.modal = $(options.modal);
    this.overlay = $(options.overlay);
    var self = this;  
    this.overlay.on("click", this.close);  
  }

    open(content){
        self.modal.html(content);
        self.modal.addClass("open");
        self.overlay.addClass("open");

    }
    close(){
        self.modal.removeClass("open");
        self.overlay.removeClass("open");
    }


}



var p = new Popup({
    modal: ".modal",
    overlay: ".overlay"
});

$(".write").on("click", function(){
    p.open("TEXT");
})

Answer 1

[profesor08]

Удали var self = this;
Замени selfна this

Comments

[Returb0]

Спасибо. Но возникла проблема с строкой
this.overlay.on("click", this.close);
Где ее описать?

[profesor08]

Returb0,
this.overlay.on("click", () => this.close());

[Returb0]

Большое спасибо

Answer 2

[Николай Шабалин]

В методох open и close замени self на this

Comments

[Returb0]

Спасибо. Но возникла проблема с строкой
this.overlay.on("click", this.close);
Где ее описать?

[Николай Шабалин]

бизнес логику не держат в конструкторе, просто создайте метод, вроде такого bindEvents() и туда помещайте все свои события

[Returb0]

Николай Шабалин, спасибо

Answer 3

[Alexander Pushkarev]

class Popup{
    constructor(options) {
        this.modal      = $(options.modal);
        this.overlay    = $(options.overlay);

        this.overlay.on('click', this.close.bind(this));
    }

    open(content){
        this.modal.html(content);
        this.modal.addClass('open');
        this.overlay.addClass('open');
    }
    close(){
        this.modal.removeClass('open');
        this.overlay.removeClass('');
    }
}

Comments

[Returb0]

Большое спасибо

[Alexander Pushkarev]

Returb0, у вас контекст вызова терялся. Прочитайте как этого избежать и почему он теряется