Как сделать наследование классов ES6?

Question

[r_g_b_a]

Здравствуйте.
Есть такой пример:

class Dropdown() {
	// перенести сюда метод toggle
}

class Nav extends Dropdown {
	constructor(selector) {
  	super();
  	this.$el = document.querySelector(selector);
  	this.$btn = this.$el.querySelector('.nav-button');
    	this.$btn.addEventListener('click', this.toggle.bind(this));
  }
  
  toggle() {
  	this.$el.classList.toggle('nav_open');
  }
  
  // this.$el и this.$btn будут использоваться в других методах класса Nav
}

class Menu extends Dropdown {
	constructor(selector) {
  	super();
  	this.$el = document.querySelector(selector);
  	this.$btn = this.$el.querySelector('.menu-button');
    	this.$btn.addEventListener('click', this.toggle.bind(this));
  }
  
  toggle() {
  	this.$el.classList.toggle('menu_open');
  }
  // this.$el и this.$btn будут использоваться в других методах класса Menu
}

new Nav('.nav');
new Menu('.menu');

У меня есть два класса для навигации и меню. Они хоть и отличаются, но имеют много похожих частей кода. Например, метод toggle делает одно и то же, но оперирует разными кнопками и css-классами, поэтому я хочу перенести его в Dropdown.
Собственно вопрос: каким образом внутри Dropdown получить доступ к нужной кнопке и css-класу? Передавать их внутри super()? Но на момент вызова они еще не объявлены.

Comments

[Михаил]

я бы в super передавал

[r_g_b_a]

Подскажите, как передать в super() dom-элемент, для которого еще не вызван querySelector?

Answer 1

[Дмитрий Беляев]

class Dropdown() {
  constructor(selector) {
  	this.$el = document.querySelector(selector);
  }

  toggle(cls) {
  	this.$el.classList.toggle(cls);
  }
}

class Nav extends Dropdown {
  constructor(selector) {
  	super(selector);
  	this.$btn = this.$el.querySelector('.nav-button');
    	this.$btn.addEventListener('click', this.toggle.bind(this, 'nav_open'));
  }
}

class Menu extends Dropdown {
  constructor(selector) {
  	super(selector);
  	this.$btn = this.$el.querySelector('.menu-button');
    	this.$btn.addEventListener('click', this.toggle.bind(this, 'menu_open'));
  }
}

new Nav('.nav');
new Menu('.menu');

так?

Comments

[r_g_b_a]

Я так понял, что по тому же принципу если внутри Dropdown мне будет нужен доступ к кнопке, то я ее тут и объявляю в конструкторе. А внутри Nav или Menu она будет доступна из прототипа?
В этом подходе только смущает то, что кнопка все таки часть навигации или меню и не имеет отношения к вспомогательному Dropdown.

[Дмитрий Беляев]

r_g_b_a, может тогда стоит сделать промежуточный класс DropdownWithButton и вынести логику кнопки в него?
И иерархия тогда будет такая: Menu extends DropdownWithButton и DropdownWithButton extends Dropdown
Хотя я не сторонник наследования вообще, но даже с ним стоит стремится к SRP из SOLID

А внутри Nav или Menu она будет доступна из прототипа?

нет, все что Вы присвоите в this - будет непосредственно на конкретном инстансе, не влияя на прототип