@r_g_b_a

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

Здравствуйте.
Есть такой пример:
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()? Но на момент вызова они еще не объявлены.
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ответы на вопрос 1
bingo347
@bingo347 Куратор тега JavaScript
Ткнуть в доку лучше готового к копипасте ответа
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');
так?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽