Почему в данном примере this вызывается в контексте window и как это изменить?

Question

[GoodPirojok]

Подскажите пожалуйста.

1)Почему функция response не вызывается в контексте объекта и как её нужно оформить, чтобы this возвращал test, а не window?

2)Как аргумент из connect передать в аргумент функции из таймаута?

3)Что неправильно в плане подхода решения подобной задачи?
(в плане понимания контекста и коллбеков)

4)Правильно ли я в конце вызвал данный метод с точки зрения опытных программистов или как правильней оформить это решение(вызов функции или название, оформление внутри конструктора)?

function test() {
	
	this.data = null;
	this.response = function() {
		console.log(this.data);
	}
	this.connect = function(callback) {
		setTimeout((callback) => {
			this.data = "Steve Jobs";
		}, 500);
		callback();
	}
}

let t = new test();
t.connect(t.response);

Answer 1

[Сергей Соколов]

I. Чтобы разобраться, вставьте повсюду console.log().
Так узнаете, где this – ваш объект, а где становится «вдруг» window:
console.log("внутри timeout", this);

II. Освежите отличия стрелочных функций (callback) => { ... } от обычных function() { ... }
В исходном коде

this.response = function() { .. тут собственный this.. }

Когда передаёте аргументом ..(t.response), он улетает из контекста Window, поэтому в нём this == window.
Попробуйте использовать стрелочную функцию:

this.response = () => { .. тут this на момент обращения к нему .. }

III. Посмотрите на исходный код и скажите, что раньше исполнится: callback() или this.data = "Steve Jobs" ?

Вот так, вроде бы, работает, как ожидается. С минимальными изменениями:

spoiler

function test() {
  
  this.data = null;
  this.response = function() {
    console.log(this, this.data);
  }
  this.connect = function(callback) {
    setTimeout(() => {
      this.data = "Steve Jobs";
      callback.call(this);
    }, 500);
  }
}

t = new test();
t.connect(t.response);

Answer 2

[casoer]

В test создайте переиенную self=this и юзайте её