ООП + jQuery, как правильно делать? Подскажите, создал класс на JS, который будет работать со скидками (подгружать по AJAX количество бонусных баллов, затем вычислять сколько это в деньгах, ну и обрабатывать input где менеджеры будут вводить сумму для списания бонусов).
Выглядит так: pastebin.com/BqqwtPZK
В качестве обработчиков событий я использую методы этого класса, проблема в том, что в функции для обработчиков передается свой this, и мне приходится объявлять некий var self = affiliate.
Кажется, я запутался с этими this и прототипным ООП, у меня сложилось ощущение, что я что-то неправильно делаю. Как мне изменять свойства объекта правильно в сочетании с обработчиками событий jQuery?
P.S. Всякие Vue и Angular не предлагать, по ТЗ именно jQuery.

Предыдущий
вопрос Следующий
вопрос

Для того чтобы правильно работать с контекстом this в обработчиках событий jQuery, можно воспользоваться методом bind() или стрелочными функциями. В вашем случае, вы можете изменить свои методы класса, чтобы использовать bind() для привязки контекста класса к обработчикам событий jQuery.

Пример:

function Affiliate() {
this.bonusPoints = 0;
this.amount = 0;
this.$input = $('#input');
$('#button').click(this.buttonClick.bind(this));
}
Affiliate.prototype.loadBonusPoints = function() {
// Загрузка бонусных баллов по AJAX
}
Affiliate.prototype.calculateAmount = function() {
// Вычисление суммы в деньгах
}
Affiliate.prototype.buttonClick = function() {
this.amount = this.$input.val();
this.calculateAmount();
}
var affiliate = new Affiliate();

В данном примере мы используем метод bind(this), чтобы привязать контекст текущего объекта класса к методам класса, и теперь в обработчиках событий jQuery this будет указывать на объект Affiliate.

Также, вы можете использовать стрелочные функции вместо метода bind():

function Affiliate() {
this.bonusPoints = 0;
this.amount = 0;
this.$input = $('#input');
$('#button').click(() => this.buttonClick());
}
Affiliate.prototype.loadBonusPoints = function() {
// Загрузка бонусных баллов по AJAX
}
Affiliate.prototype.calculateAmount = function() {
// Вычисление суммы в деньгах
}
Affiliate.prototype.buttonClick = function() {
this.amount = this.$input.val();
this.calculateAmount();
}
var affiliate = new Affiliate();

Таким образом, вы сможете избежать путаницы с контекстом this и работать с вашим классом правильно в сочетании с обработчиками событий jQuery.