Как работает контекст вызова функций? И почему так?

Question

[Кристина]

Искренне не понимаю (пока), почему функции в одном случае вызываются в глобальном контексте, в другом в локальном. Я где-то пропустила важный факт? Читала про лексическое окружение, ок, читала про Scope, ок. Но как всё под капотом в разных условиях работает, не могу уложить в голове.

class Foo{
  constructor(){
    this.bar()
  }
  
  bar(){
  console.log(this);
  }
  
}

let foo = new Foo();// class

/*******************************************/
foo.bar(); // class

/*******************************************/
let btn = document.querySelector('button');
btn.addEventListener('click', foo.bar); // html-элемент

/*******************************************/
function glob(){
  function inFoo(){
    console.log(this);
  }
  
  inFoo();
}

glob(); // window

Comments

[Lynn «Кофеман»]

Контекст (this) и Scope это совершенно разные никак не связанные между собой вещи

[Кристина]

Алексей Тен, Спасибо за конструктивный ответ! Я как раз такой и искала))

Answer 1

[Кристина]

Вот нашла хороший, на мой взгляд, ответ. Как раз для таких вопросов!))))

Answer 2

[Алексей Уколов]

Функции вызываются в том контексте, в котором вызываются (это важная тавтология), а не объявляются.

Вызываете bar в конструкторе? Там this равен тому объекту, который создаётся.
В том месте, где вызывается glob() действует глобальный контекст.
Обработчик события вызывается js-движком, который работает, разумеется, в глобальном контексте, поэтому и для обработчика действует глобальный контекст, но движок автоматически для удобства разработчиков привязывает контекст элемента, на котором произошло событие.

Рекомендую ознакомиться: Привязка контекста и карринг: "bind"

Comments

[Кристина]

Алексей Уколов Но вот я же вызываю явно метод класса foo.bar(); и всё равно он в локальном контексте вызывается. :)

Вот здесь я и ломаюсь.

[Кристина]

Алексей Уколов this по клику выдаёт html элемент вообще)

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

Кристина,

Но вот я же вызываю явно метод класса

Где?
btn.addEventListener('click', foo.bar); // тут?
Нет. Вы не вызываете метод, лишь предаете его с потерей контекста.

[Кристина]

Антон Спирин,

/*******************************************/
foo.bar(); // class

/*******************************************/

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

Кристина, тут да. В этом случае функция получает контекстом объект из которого вызывается.