Стрелочная функция или функция Fat теперь не новы для опытного разработчика Javascript. Но тем не менее ссылка this в другом контексте по-прежнему сбивает многих из нас.
Это попытка собрать все такие возможности для лучшего понимания.
var obj = { one: 1, two: function () { console.log(this) }, three: () => { console.log(this) }, four: function () { console.log(this) return () => { console.log(this) } }, five: () => { console.log(this) return function () { console.log(this) } } } obj.two() obj.three() obj.four()() obj.five()()
Прежде чем продолжить, попробуйте выяснить результат оператора консоли.
obj.two() -> { one: 1, two: ...}
General function и this относятся к объекту.
obj.three() -> Window
Поскольку функция Arrow не имеет собственного this, она проверяет наличие this во внешней области видимости, то есть в Window.
obj.four()() -> {one: 1, ...} {one: 1, ...}
Общая функция this относится к объекту (obj), а функция стрелки относится к this во внешней области (т. е. в области общей функции), которая является obj
obj.five()() -> Window Window
this стрелочной функции ссылается на окно (как и ранее), а this общей функции также ссылается на окно здесь, поскольку оно выполняется в глобальном контексте.
const twoCopy= obj.two t() -> Window
Здесь мы присвоили значение obj.two (функции) функции twoCopy. Теперь, когда мы вызываем twoCopy, this выполняется не в контексте obj, а в контексте Window/Global.
Даже если мы используем метод bind для изменения контекста функции Arrow, это будет невозможно.
const func = () => console.log(this) const bindFunc = func.bind({a: 1}) bindFunc() -> Window
Таким образом, мы не можем привязать или изменить ссылку this функции Arrow, она всегда обращается к своему внешнему лексическому окружению, чтобы получить ее.
Подробно узнать о функции Arrow. Проверьте это ФУНКЦИЯ СТРЕЛКИ