@symnoob

Как обратиться к методу в классе из вне?

Всем привет,

как можно обратиться к методу в классе из вне?

в моём случае, всё обстоит так:

js File 1:
export default class MyCustomClass{

  function myCustomMethod(){
    console.log('done');
  }
}


js File 2:
improt MyCustomClass from "../assets/js/MyCustomClass";
$(document).ready(function(){
 let myCustomClass = new MyCustomClass();
})


HTML:
<button class="btn btn-primary" onclick="myCustomClass.myCustomMethod()">Выполнить!</button>


но это почему то не работает :-(
myCustomClass is not defined at HTMLButtonElement.onclick
  • Вопрос задан
  • 127 просмотров
Решения вопроса 1
TNPTSYWWCC
@TNPTSYWWCC
And I Told Them I Invented Times New Roman
Чтобы вызвать метод класса без создания экземпляра класса - метод нужно сделать статическим.
Ты объявляешь переменную внутри ready, она там и остаётся, она локальная, не вытекает в глобальную область видимости, это не var, но var использовать и не нужно.

Вообще, классы в твоём случае не самое удачное решение, события так вешать тоже не стоит.
Используй пока более приятный addEventListener (или аналог слушанья событий у JQuery), там можешь и методы классов вызывать.
Потом придёшь к реактивным фреймворкам, там и onClick вешать уже практика верная.

<button class="btn btn-primary class-signifying-of-desired-event">Выполнить!</button>


document.addEventListener("click", function (event) {
  const target = event.target.closest(".class-signifying-of-desired-event");
  if (!target) {
    return;    
  }

  const myCustomClass = new MyCustomClass();
  myCustomClass.myCustomMethod();
});


JQ вариант, с созданием экземпляра класса выше по контексту:
const myCustomClass = new MyCustomClass();

$(document).ready(function(){
  myCustomClass.action1();
})

$(document).on("click", ".class-signifying-of-desired-event", function (event) {
  myCustomClass.action2();
});


Лично по моему мнению ООП в JS дело такое себе, он куда более склонен в функционально-процедурному программированию. Чтобы не создавать постоянно экземпляр класса в событиях - нужно иметь какой-то DiC или реализовывать Синглтон, но ни то, ни другое в JS нормально не сделать и в принципе не нужно)

Вместо класса можно создать функцию-фабрику, которая будет возвращать нужные функции и иметь свою область видимости с контекстом (если они нужны в принципе).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ошибка вот здесь

$(document).ready(function(){
 let myCustomClass = new MyCustomClass();
})


переменная myCustomClass объявлена в контексте функции и не доступна за её пределами, а код в обработчике onclick="myCustomClass.myCustomMethod()" ожидает, что это будет глобальная переменная.
Чтобы поправить ошибку, достаточно объявить переменную вот так:

// без document.ready
window.myCustomClass = new MyCustomClass();


Но это будет НЕ правильным решением, потому что:
1. Не нужно смешивать разметку и код, обработчик на onclick нужно вешать через js
2. Не нужно использовать глобальные переменные, в больших проектах это чревато багами
3. Если используете JQuery, то делайте всё через него, не смешивайте разные подходы.

Воспользуйтесь кодом в примерах от Uneasy Hearts Weigh the Most
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы