Почему объект и метод, которые пренадлежат window возвращают разный контекст?

Question

[Антон Шульц]

Почему во втором случае мы получаем window, если функция находится в объекте и принадлежит ему?
И из-за чего тогда без таймаута он получает в this объект в котором находится?

let obj = {
	name : "Hello world",
	fn : function() {
		console.log(this);
	}
}
obj.fn();
setTimeout(obj.fn, 500);

Comments

[Aetae]

obj.fn() = вызов функции fn в контексте obj.
setTimeout(obj.fn, 500) - передача сcылки на функцию fn в setTimeout. obj не имеет значения.

Может так понятнее:
setTimeout(obj.fn, 500)
всё равно что:
const temp = obj.fn; setTimeout(temp, 500)
Контекст определяется только способом вызова, любая передача и присвоение - передаёт только саму функцию без всякого контекста.

Стрелочная же функция в момент создания привязывает к себе текущий контекст, что аналогично bind.
В коде

setTimeout(() => {
obj.fn();
}, 500);

всё работает не из-за стрелочной функции, а потому, что как сказано выше, контекст определяется в способом вызова.

[Антон Шульц]

Aetae,спасибо
Почему в данном случае у стрелочной функции контекст window, а не obj?
ведь я её создал в объекте.
Но если бы поместил стрелочную функцию в fn, то у неё был бы уже контекст obj.
Т.е. почему она не хочет по умолчанию присваивать контекст объекта, но в функции этого объекта она его присвоит?

let obj = {
	name : "Hello world",
	fn : function() {
		console.log(this);
	},
	el : () => {
		console.log('el ',this)
	}
}

[Aetae]

Стрелочная функция привязывает к себе текущий контекст(текущее значение this), она не смотрит где вы её пишите. Контекст же существует только внутри функции и только в момент вызова этой функции. Иначе контекст всегда window(или undefined в strict режиме).

let obj = { el : () => {console.log('el ',this)}} 
obj.el() // всегда window

function a(){
   let obj = { el : () => {console.log('el ',this)}} 
   obj.el() // всегда зависит от контекста вызова a
}
a() // window
let b = {
  aInB: a
};
b.aInB() // b
a.call('foo') // String('foo')

[Антон Шульц]

Aetae, от души просто!

Answer 1

[Тигран Абрамян]

Самое понятное видео на Youtube про this

Comments

[Антон Шульц]

Почему тогда стрелочная функция у которой нет контекста при вызове из другой функции берет её контекст, а не оставляет window?
Ведь мы даже стрелочную функцию не можем вызвать принудительно с контекстом.

[Тигран Абрамян]

Антон Шульц,
Выражения стрелочных функций имеют более короткий синтаксис по сравнению с функциональными выражениями и лексически привязаны к значению this (но не привязаны к собственному this)

Answer 2

[Дима Паутов]

setTimeout(() => {
obj.fn();
}, 500);

Просто почитайте про контекст в js и ключевое слово this.