Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как создать свой класс (https://javascript.ru/forum/misc/83183-kak-sozdat-svojj-klass.html)

slark 08.10.2021 16:31

Как создать свой класс
 
Добрый день, создал свой небольшой класс который вешает событие "клик" на свои объекты, в моем случае на кнопки. CSS-класс кнопки передается при создании объекта.

class btn {
    constructor (className) {
        this.className = className
        this.btn = document.querySelector(className)
    }

    btnClick () {
        this.btn.addEventListener('click', function () {
            console.log('Привет: ' + this.className)
        })
    }
}

let btn1 = new btn('.btn-1')
btn1.btnClick()

let btn2 = new btn('.btn-2')
btn2.btnClick()


Вопрос , допустим у меня будет 10 методов, что делать чтобы их постоянно не вызывать для каждого объекта? Можно ли сделать так, чтобы эти методы автоматически запускались при создании объекта?

Aetae 08.10.2021 16:35

constructor (className) {
  this.className = className
  this.btn = document.querySelector(className)
  this.btnClick()
}
0_o

slark 08.10.2021 16:40

спасибо , вроде работает
не знал что в конструктор можно вызовы запихивать

рони 08.10.2021 16:44

slark,
class btn {
            constructor(className) {
                this.className = className;
                this.btn = document.querySelector(className);
                this.btn.addEventListener('click', this.btnClick.bind(this));
                this.btnClick()
            }

            btnClick() {
                console.log('Привет: ' + this.className)
            }
        }

        let btn1 = new btn('.btn-1')

        let btn2 = new btn('.btn-2')

slark 08.10.2021 16:46

жесть круто спс, буду допиливать

Aetae 08.10.2021 16:57

Это ещё не круто, круто вот так) :
class btn {
  constructor(className) {
    this.className = className;
    this.btn = document.querySelector(className);
    this.btn.addEventListener('click', this);
    this.btnClick()
  }
  
  handleEvent(event) {
    const { type: [firstLetter, ...rest] } = event;
    return this[`btn${firstLetter.toUpperCase()}${rest.join('')}`](event);
  }

  btnClick() {
    console.log('Привет: ' + this.className)
  }
}

slark 08.10.2021 17:05

ну всё поплыл

рони 08.10.2021 17:22

Aetae,
:thanks:


Часовой пояс GMT +3, время: 19:51.