Как интерпретировать this в данном примере?

Question

[Александр Дегтярев]

function CoffeeMachine(power) {
  this.waterAmount = 0;

  var WATER_HEAT_CAPACITY = 4200;

  var self = this; // Вопрос по этой строке

  function getBoilTime() {
      return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
    }

  function onReady() {
    alert( 'Кофе готово!' );
  }

  this.run = function() {
    setTimeout(onReady, getBoilTime());
  };

}

var coffeeMachine = new CoffeeMachine(100000);
coffeeMachine.waterAmount = 200;

coffeeMachine.run();

Выше код, взятый с сайта learn.javascript.ru - меня конкретно интересует конструкция var self = this; помогите разобраться, насколько я знаю this это ссылка на текущий объект после создания объекта но данная конструкция не работает при конкретном присвоении объекта. Я не могу понять эту строку хотя с this разобрался. Из данной ситуации сам вышел путем создания промежуточной переменной var water = 0; this.waterAmount = water; тогда все без этих спорных конструкций все прекрасно работает

Answer 1

[Алексей Немиро]

function CoffeeMachine(power) {
  //...

  var self = this; // запоминаем ссылку на текущий объект

  //...

  function getBoilTime() {
    // здесь this будет ссылкой на window, 
    // т.к. вызов метода getBoilTime() происходит из другого контекста
    // доступ к исходному объекту возможен через ссылку, 
    // которая была передана в переменную self
    console.log('this', this);
    console.log('self', self);
    return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
  }

  // ...

  this.run = function() {
    setTimeout(onReady, getBoilTime());
  };
}

Привязка контекста и карринг: "bind"

С передачей контекста код будет примерно таким:

function CoffeeMachine(power) {
  this.waterAmount = 0;

  var WATER_HEAT_CAPACITY = 4200;

  function getBoilTime() {
      console.log('getBoilTime', this);
      return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
    }

  function onReady() {
    alert( 'Кофе готово!' );
  }

  this.run = function() {
    console.log('run', this);
    var interval = getBoilTime.apply(this, null);
    setTimeout(onReady, interval);
  };

}

var coffeeMachine = new CoffeeMachine(100000);
coffeeMachine.waterAmount = 200;

coffeeMachine.run.apply(coffeeMachine, null);

Comments

[Александр Дегтярев]

т.е по первому листингу т.к функция getBoilTime() не создает объекта, значит будет ссылаться
на глобальный объект windows? А мой метод имеет места быть - через создание промежуточной переменной?

[Алексей Немиро]

Александр Дегтярев: функция getBoilTime находится в контексте window.

Её можно поместить в контекст текущего экземпляра объекта (через this):
this.getBoilTime = function() { ...
Тогда код может быть таким:

function CoffeeMachine(power) {
  this.waterAmount = 0;

  var WATER_HEAT_CAPACITY = 4200;

  this.getBoilTime = function() {
      console.log('this', this);
      return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
    }

  function onReady() {
    alert( 'Кофе готово!' );
  }

  this.run = function() {
    console.log('run', this);
    setTimeout(onReady, this.getBoilTime());
  };

}

var coffeeMachine = new CoffeeMachine(100000);
coffeeMachine.waterAmount = 200;
coffeeMachine.run();

onReady() в данном случае остается в контексте window. Это тоже можно изменить, при необходимости.

[Александр Дегтярев]

Алексей Немиро: понял, благодарю. Минус такого подхода что getBoilTime становится виден и доступен из внешнего кода

Answer 2

[Александр Золотых]

Когда вам необходимо обратиться к конкретному контексту из другого объекта, то используя ключевое слово this вы обратитесь к контексту текущего объекта из которого происходит обращение, именно поэтому создается альтернативная ссылка на необходимый контекст.

Comments

[Александр Дегтярев]

Можете показать на простом но понятном примере пожалуйста, это важная статья знания

[Александр Дегтярев]

MaxKorz: понял все, классно объяснил. Благодарю))

Answer 3

[gleendo]

При передачи функции в setTimeout, контекст будет потерян,и теперь this будет равен не новому объекту, а будет равен undefined.
Поэтому если не использовать какой нибудь метод сохранения контекста, работать ничего не будет.
Например если в функции не использовать метод с сохранением контекста в переменную в замыкании, а просто писать this.метод то будет ошибка.

function getBoilTime() {
  return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
}

В данном случае, this будет не новый объект, а будет равен undefined.
поэтому вызов undefined.метод приведет к ошибке.
Для решения данной проблемы используют неявный вызов с call/apply, сохранение контекста в новую переменную как в этом случае, или функцию bind, которая позволяет сохранить контекст для функции.

Ссылки:
Потеря контекста
Привязка контекста при помощи bind
call/apply
Сохранение контекста (habrahabr)