Почему в JavaScript используется 'var that = this': объяснение

Быстрый ответ

В JavaScript конструкция var that = this; применяется для сохранения ссылки на текущий контекст (this) во вложенных функциях, например, в коллбэках, где this может ссылаться на другой объект. Переменная that является псевдонимом для this, сохраняя связь с первоначальным контекстом.

Пример кода:

function MyCounter() {
  var that = this; // Захватываем 'this' в переменную 'that'
  this.count = 0;
  
  this.increment = function() {
    setTimeout(function() {
      that.count++; // 'that' сохраняет связь с исходным контекстом
      console.log(that.count); // Корректно выводит увеличенный счёт
    }, 1000);
  };
}

var counter = new MyCounter();
counter.increment(); // Печатает: 1 спустя 1 секунду

Примечание: Без использования 'that' в колбэке setTimeout, this начал бы ссылаться на глобальный объект window (или на undefined в строгом режиме), а не на MyCounter.

Подробности об 'var that = this;'

Объяснение 'this'

В JS значение this меняется в зависимости от контекста вызова функции.

Подробнее об этом расскажет наш спикер на видео

'var that = this;' на практике

В обработчиках событий this может относиться к DOM-элементу, а не к предполагаемому контексту объекта. Использование переменной that позволяет избежать путаницы.

Пример с обработчиками событий:

function Button() {
  this.clicked = false;
  this.click = function() {
    this.clicked = true; // Здесь 'this' предположительно указывает на Button
  };
}

var btn = new Button();
document.getElementById('my-btn').addEventListener('click', btn.click); // Но в данном случае 'this' становится другим

Если не использовать var that = this;, свойство clicked применялось бы к элементу DOM, а не к экземпляру Button.

Описательные псевдонимы для 'this'

Описательные названия алиасов вроде self, buttonElement помогают лучше понять код и управляемые this объекты.

'that' вне глобального контекста

that предотвращает отсылку this к глобальному объекту или undefined.

'that' в замыканиях

В замыканиях that сохраняет ссылку на this, обеспечивая доступ внутренних функций к контексту родительской области видимости.

Современные альтернативы 'var that = this;'

Современный JS предоставляет стрелочные функции, Function.prototype.bind, call() и apply(), которые помогут сохранить контекст.

Визуализация

var that = this; можно представить как эстафетную палочку:

🏃(this) -> 🤝 -> 🏃(that)

this — это бегун, передающий контекст другому бегуну that, когда сам может сменить "дорожку" при создании нового функционального контекста.

Применение 'var that = this;' в реальном коде

'that' в асинхронных операциях

that сохраняет контекст в асинхронных сценариях, таких как Ajax-запросы и промисы.

Пример с AJAX:

function DataFetcher() {
  var that = this;
  this.data = null;
  
  this.fetch = function() {
    $.ajax({
      url: 'api/data',
      success: function(response) {
        that.data = response;
      }
    });
  };
}

Избыточное использование

Без основательной причины var that = this; может усложнить код. Понимайте, когда уместно использовать call(), apply(), и bind() для явного определения контекста this.

Мудрые слова

Дуглас Крокфорд рекомендует чистый стиль с именованными алиасами для улучшения понимания кода.

Эволюция вместе с языком

В ES6 использование стрелочных функций уменьшает необходимость в дополнительных переменных, таких как that, так как this в них унаследовано.

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
  }, 1000);
}

Полезные материалы

1. this – JavaScript | MDN — исчерпывающее руководство по this.
2. What does 'var that = this;' mean in JavaScript? – Stack Overflow — советы профессионального сообщества.
3. Нежное объяснение "this" в JavaScript — понятное объяснение this и that.
4. Тайная жизнь объектов :: Eloquent JavaScript — наглядный учебник по this в объектах JS.
5. Ключевое слово this в JavaScript – YouTube — видео-руководство для визуального осмысления this.