Как правильно инициализировать объект класса в JS?

Question

[genew]

Делаю класс

function MyClass() {
   this.init = function() {
      $("div.myclass").click(function() { myclick(); })
   };
   this.myclick = function() {
      alert("myclick");
   };
}

В коде пишу:

var myclass = new MyClass();
myclass.init();

Однако при клике на div получаю ошибку, что функция не найдена.
Если в методе init написать так:

$("div.myclass").click(function() { myclass.myclick(); })

, то все работает.
Но как быть, если я не знаю в какой переменной будет мой объект?

Answer 1

[Игорь Морев]

Обращайтесь к функции так me.myclick(). В этом случае ссылка на экземпляр класса будет сохранена. А me объявите в конструкторе. Спасибо fetis25.

Comments

[fetis26]

и this будет undefined

[Игорь Морев]

fetis26: точно, this же сошлётся на jquery объект

[genew]

this.myclick сработал, только надо без скобок указывать
спасибо

[genew]

Игорь Морев: странно, но не сослался, работает и так
но в будущем буду лучше через переменную делать

[fetis26]

fetis26 ващето

[fetis26]

genew: работает, потому что у вас в onclick не вызываются методы или свойства объекта, как только будут этот код сразу поломается.

Answer 2

[fetis26]

var myclass = new MyClass();

еще нужно init поменять

function MyClass() {
  var _this = this;

  this.myclick = function() {
      alert("myclick");
   };

  $("div.myclass").click(_this.myclick)

}

но это достаточно старый подход. лучше использовать ES6

Comments

[genew]

опечатался, конечно делаю через new

[fetis26]

genew: там надо еще конструктор поправить. я обновил ответ

[genew]

fetis26: спасибо за подсказку насчет _this, правда и без нее сработало, но так логичнее )
ES6 хорошо, но насколько я понимаю еще не все браузеры его поддерживают

[Виталий]

genew: babel и все браузеры знают про ес6

Answer 3

[Сергей Мельников]

зачем писать init() если вся функция и есть та самая функция, которая выполнится при инициализации

function MyClass() {
  $("div.myclass").click(this.myclick)
}
MyClass.prototype.myclick = function() {
  alert("myclick")
}

либо

function MyClass() {

  var self = this

  $("div.myclass").click(function() {
    self.myclick()
  })
}
MyClass.prototype.myclick = function() {
  alert("myclick")
}