How to rewrite the constructor to the class?

There is a class which calls modelku and when you click on owerlay hides it
var MyFavorit = function(obj) {
 this.banner = document.querySelector(obj.banner);
 this.base = document.querySelector(obj.base)

 myfavorit var = this;

 this.open = function (content) {
 myfavorit.banner.innerHTML = content;
myfavorit.banner.classList.add("open")
myfavorit.base.classList.add("open")
}

 this.close = function() {
myfavorit.banner.classList.remove("open")
myfavorit.base.classList.remove("open")
}

 this.base.onclick = myfavorit.close

 }

Everything inside the constructor easily rewritten in classes

class MyFavoritClass {
 constructor(obj) {
 this.banner = document.querySelector(obj.banner);
 this.base = document.querySelector(obj.base)
}
 open (content) {
 this.banner.innerHTML = content;
this.banner.classList.add("open")
this.base.classList.add("open")
}
 close () {
this.banner.classList.remove("open")
this.base.classList.remove("open")
 } 
 }

In addition to this line.
this.base.onclick = myfavorit.close

Don't understand how to implement the address to the constructor arguments, or how to create a function which would work without much challenge outside of class
April 7th 20 at 15:41
1 answer
April 7th 20 at 15:43
Solution
class MyFavourite {
 constructor(props) {
 const { banner, base } = props;

 this.banner = document.querySelector(banner);
 this.base = document.querySelector(base);

 this.open = this.open.bind(this);
 this.close = this.close.bind(this);

this._addListeners();
}

 open() {
 this.banner.innerHTML = content;
this.banner.classList.add('open');
this.base.classList.add('open');
}

 close() {
this.banner.classList.remove('open');
this.base.classList.remove('open');
}

 _addListeners() {
 this.base.addEventListener('click', this.close, false);
}
}
@lyla please Tell me:
1. Why bandit open and close .bind(this)
2. Why under these f-II to allocate a communication, if possible in the event of the arrow function to add - dana.Bayer commented on April 7th 20 at 15:46
in the event the arrow function to add

do not understand

Why bandit

because when this f-I will be performed in the handler, it will lose the context if it does not bind - Henriette_Harvey37 commented on April 7th 20 at 15:49
@lyla,
It is possible here so
.addEventListener('click', () => this.open());
dial GIEZ functions do not have their own this and take it with Lex external environment

as I learn, I want to know what is the fundamental difference and why it is so)
thanks for the help) - dana.Bayer commented on April 7th 20 at 15:52
@lyla, Thanks - johnny10 commented on April 7th 20 at 15:55
@Bettie_Franecki, anonymous f-AI is not the best practice if to fix the context is bind — then why not use it? - Henriette_Harvey37 commented on April 7th 20 at 15:58
@lyla, OK, I'll know
Just a bunch of lessons on react, for example, where no bindat the context, and using () => {} trigger

thank you - dana.Bayer commented on April 7th 20 at 16:01

Find more questions by tags JavaScript