Ключевое слово 'this' в контексте функции обратного вызова в JavaScript

Оффтоп javascript
1

Я немного запутался с использованием ключевого слова ‘this’ в JavaScript. Вроде бы понимаю его основной принцип, но в одном конкретном случае оно меня сбивает с толку.

У меня есть метод bindEvents, в котором я привязываю событие отправки формы. Внутри callback-функции ‘this’ теперь указывает на форму, а не на родительский объект.

Я знаю, что можно использовать self = this в начале метода, чтобы сохранить ссылку на родительский объект. Но в данном случае это не работает, так как весь метод является callback-функцией.

Я слышал про .call, .apply и $.proxy, но не уверен, что их нужно применять в этом случае. Возможно, существует более простой способ решения этой проблемы?

Вот пример кода:

var ТвитыМенеджер = {
  старт: function(настройки) {
    this.настройки = настройки;
    this.адрес = 'http://api.twitter.com/search';
    this.навеситьСобытия();
  },
  
  навеситьСобытия: function() {
    this.настройки.форма.on('submit', this.получитьТвиты);
  },
  
  получитьТвиты: function(событие) {
    событие.preventDefault();
    var запрос = this.настройки.форма.find('#запрос').val();
    // Здесь проблема с this
  }
};

ТвитыМенеджер.старт({
  форма: $('#искатьТвиты'),
  список: $('#результаты')
});

Как лучше обращаться к this.настройки внутри метода получитьТвиты?

2

А можно попробовать использовать замыкание? Типа так:

навеситьСобытия: function() {
var self = this;
this.настройки.форма.on(‘submit’, function(событие) {
self.получитьТвиты(событие);
});
},

Тогда self будет ссылаться на нужный объект внутри обработчика. Это старый, но рабочий способ. Правда, современные методы вроде стрелочных функций или bind() считаются более предпочтительными.

3

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

навеситьСобытия: function() {
  this.настройки.форма.on('submit', (событие) => this.получитьТвиты(событие));
},

Другой вариант - привязать контекст с помощью bind:

навеситьСобытия: function() {
  this.настройки.форма.on('submit', this.получитьТвиты.bind(this));
},

Оба способа позволят корректно обращаться к this.настройки внутри получитьТвиты. Лично я предпочитаю стрелочные функции, так как они более лаконичны.

4

Я тоже сталкивался с такой проблемой! Лично мне помогло использование метода bind(). Вот как это можно сделать:

навеситьСобытия: function() {
  this.настройки.форма.on('submit', this.получитьТвиты.bind(this));
},

Таким образом, мы привязываем контекст this к методу получитьТвиты. теперь внутри него this будет указывать на объект ТвитыМенеджер, а не на форму.

есть еще вариант с использованием стрелочной функции, но мне кажется bind() более понятным и универсальным. Главное - не забыть его использовать при навешивании событий!