Как работет context в Javascript?

Question

[theWaR_13]

Привет всем. Думал что понимаю, как работает контекст, оказалось, что нет. Я накидал простой пример: https://codesandbox.io/s/ppk1v97yrj

Есть функция logThis, которая выводит в консоль текущий this. Очевидно, что если просто ее вызвать, this указывает на Window/undefined (в strict mode).
Второй тест - создание объекта, с методом, который вызывает logThis. Тоже очевидно, что this будет указывать на этот объект.
Третий тест - создание объекта через new с использованием функции, объект использует logThis через прототип. Тут this указывает на TestOne и это тоже понятно.
Четвертый тест - создание объекта через new с использованием class. Я не смотрел, как под капотом ES6 работает с классами, но есть подозрения, что должно получиться что-то вроде этого. Но видимо не совсем так, потому что this уже указывает на Window/undefined.

Соответственно есть вопрос, почему в 4 случае он указывает на window? Ведь this высчитывается динамически в зависимости от того, на каком объекте он вызыван, а в данном случае он вызван на объекте testObjTwo. Если у кого-то есть статья, где в деталях рассказывается про context, было бы замечательно.

Answer 1

[Антон Спирин]

Так будет показывать экземпляр класса:

class TestTwo {
  constructor() {
    this.logThis = logThis;
  }
}

Почитать.

Comments

[theWaR_13]

Спасибо за ответ. Я знаю, как пофиксить эту проблему. Меня интересует именно почему так.

[Антон Спирин]

theWaR_13, функция(не стрелочная) не привязанная к определенному контексту(bind), при простом вызове всегда будет получать как this window/undefined, где бы ее не определяли и не вызывали.
Пример.

[theWaR_13]

Антон Спирин, а почему тогда во втором и третьем случае (myObj и TestOne) она указывает на контекст этих объектов?

[theWaR_13]

Все, я разобрался :) В вашем ответе функция передается по ссылке, но не вызывается. К моменту вызова она будет указывать на нужный объект. В моем четвертом случае, она сразу вызывается, контекста нет, поэтому указывает на Window/undefined.

Answer 2

[VoidVolker]

Соответственно есть вопрос, почему в 4 случае он указывает на window?

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

function logThis() {
  console.log('logThis', this);
}
class TestTwo {
  constructor() {}
  log() {
    logThis();
    console.log('TestTwo.log', this);
  }
}

https://codesandbox.io/s/n4x93k3ppl

UPD: Тут как раз подоспела свежая статья на хабре: https://habr.com/company/ruvds/blog/422089/

Comments

[theWaR_13]

Спасибо за ответ. Можете объяснить почему в данном случае она вызывается в глобальном контексте, если console.log('TestTwo.log', this); выводит TestTwo? Соответственно я считал, что для logThis также контекст выполнения будет TestTwo.

[Антон Спирин]

Не верно. Тут совершается простой вызов и совершенно не важно в каком контексте функция определена. Если вызов простой, то функция получает объект по-умолчанию - window/undefined.

[VoidVolker]

theWaR_13 this — по факту для каждой функции является локальной переменной. Т.е., по сути у функции при вызове есть два вида входных параметров: аргументы и контекст (this). Если контекст не указан — используется объект по умолчанию window/undefined/global. Контекст можно указать так:

log() {
    logThis.call(this);
    console.log('TestTwo.log', this);
  }

Т.о., при вызове метода log:

var testObjTwo = new TestTwo();
testObjTwo.log();

Происходит следующее:

testObjTwo.constructor.prototype.log.call(testObjTwo);

theWaR_13 изучайте матчасть и как все работает внутри, вот полезная ссылка: bonsaiden.github.io/JavaScript-Garden/ru

[theWaR_13]

VoidVolker, благодарю за развернутый ответ и ссылку. Как я уже написал в ответе выше, ошибка была в том, что во втором и третьем случае функции не вызывались, но вызывались позже в контексте объекта. А в четвертом случае я сразу ее вызывал, поэтому this, ввиду отсутствия контекста, ссылался на Window. Маленькая деталь, которую я упустил и из-за этого создал этот вопрос.

[VoidVolker]

theWaR_13 обновил ответ — на хабре вышла новая статья как раз по теме, почитайте.

[theWaR_13]

VoidVolker, да, уже читал, немного бы пораньше.. Но все равно спасибо! :)