Вопрос про контекст при вызове функции из объекта

Question

Есть код, кусочек на jquery - все хорошо работает (первая кнопка), но если кликнуть на вторую кнопку, к которой событие регистрируется при помощи addEventListener, то теряю контекст, that - это кнопка, this - объект опций ajax.

Как тогда при клике по второй кнопке вызвать _.setText() изнутри getAjax() ?

$(function() {
var _ = {
    initJquery: function() {
      var that = this;
      $('#one').on('click', function() {
        that.getAjax();
      });
    },
initJs: function() {
  $('#two')[0].addEventListener('click', this.getAjax);

},

setText: function(text) {
  $('.update').html(text);
},

getAjax: function() {
  var that = this;
  $.ajax({
      url: 'txt.txt',
      type: 'POST',
      dataType: 'text'
    })
    .done(function(resp) {
      console.log('this');
      console.log(this);
      console.log('that');
      console.log(that);

      // при нажатии первой кнопки всё хорошо
      // тут теряю контекст при нажатии второй кнопки addEventListener
      that.setText(resp);
    })
    .fail(function() {
      console.log("error");
    });

}

};
_.initJquery();
  _.initJs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="one" value="Кнопка 1">
<input type="button" id="two" value="Кнопка 2">
<div class="update"></div>

Результат

Всем спасибо, разобрался. Надо было так:

.done(function() {
    this.setText(resp);
}.bind(this))

Итоговый код такой:

$(function() {

  var _ = {
    initJquery: function() {
      $('#one').on('click', function() {
        this.getAjax();
      }.bind(this));
    },

    initJs: function() {
      $('#two')[0].addEventListener('click', this.getAjax.bind(this));

    },

    setText: function(text) {
      $('.update').html(text);
    },

    getAjax: function() {
      $.ajax({
          url: 'txt.txt',
          type: 'POST',
          dataType: 'text'
        })
        .done(function(resp) {
          console.log('this');
          console.log(this);
          this.setText(resp);
        }.bind(this))
        .fail(function() {
          console.log("error ajax");
        }.bind(this));

    }
  };

  _.initJquery();
  _.initJs();

});

Answer 1

Кратко:

 $('#two')[0].addEventListener('click', this.getAjax.bind(this));

Почему у вас не работает?
Как я здесь пытался объяснить совсем недавно, функция существует сама по себе, без привязанного к ней объекта. В callback передается сама функция, как самостоятельная сущность. Информации о том, с чем ее связать не передается. То что слева от точки служит лишь для того, чтобы эту функцию найти. А this, как раз означает какой-то объект, методом которого функцию мы считаем, поэтому он и становится undefined (или window в нестрогом режиме).

Что же делать?
Передать в callback не просто функцию, а функцию и контекст. Для этого обычно используется метод bind, который создает обертку необходимой нам функции с привязанным контекстом. Когда мы эту обертку вызываем, она вызывает ваш метод с контекстом который прибиндили.

Вообще везде где вы сохраняете контекст через var that = this можно сохранить его и через bind. Это вопрос договоренностей в конкретном проекте, но лично я предпочитаю так. А в некоторых местах вообще удобнее использовать es6 arrow functions, которые не создают своего отдельного this.

Ваша первая функция с bind

initJquery: function() {
  $('#one').on('click', function() {
    this.getAjax();
  }.bind(this));
}

Она же (почти) со стрелочками:

initJquery: function() {
        $('#one').on('click', () => this.getAjax());
}