Стрелочная функция или функция 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. Проверьте это ФУНКЦИЯ СТРЕЛКИ