Dificuldade para entender o this com Arrow Functions

Olá, Leveditor, tudo bem? Entender o funcionamento do this no JavaScript pode ser uma tarefa complicada, mas acho que o melhor jeito é pensar que o this na arrow function herda o escopo do seu pai, ou seja, ele está há um nível acima do this que estamos acostumados a lidar. Vou tentar demonstrar alguns exemplos que julgo serem mais simples.

Primeiro, vamos abrir o console do navegador e executar um console.log() no this:

console.log(this);

Você vai perceber que o comando irá retornar o objeto window, isso porque estamos no escopo global, guarde essa informação por enquanto.

Agora vamos criar dois objeto, um objeto Aluno e o outro objeto ArrowAluno, esses objetos serão simples, só terá o atributo nome e uma função chamada getThis para podermos ver a qual this estamos nos referenciando.

var Aluno = {
    nome: 'Jorge',
    getThis: function() {
        console.log(this);
    }
}

var ArrowAluno = {
    nome: 'Jorge',
    getThis: () => {
        console.log(this);
    }
}

Ok, agora vamos finalmente para o this, primeiro vamos executar

Aluno.getThis();

Veja que o retorno é o próprio objeto, afinal é o this que estamos acostumados, o que faz referencia ao próprio objeto.

Pois bem, vamos pensar agora, lá em cima foi dito que o this da arrow function faz referencia ao escopo do pai e não ao próprio escopo. Se nosso objeto ArrowAluno foi criado no escopo global, ou seja, não foi criado dentro de nenhuma função ou objeto, então o escopo global é seu "escopo pai", então no ArrowAluno, o this deve ser o mesmo do seu pai, ou seja, o mesmo do escopo global. Façamos o teste:

ArrowAluno.getThis()

o retorno é justamente o mesmo que console.log(this), provando que o this de uma arrow function faz referência ao seu pai(o escopo global), e não ao seu próprio escopo.

Para melhorar a visualização, temos o seguinte esquema:

Escopo global {
    Aluno: {Escopo de Aluno} //o this de uma function está dentro desse escopo
    ArrowAluno: {Escopo de ArrowAluno} //o this de uma arrow function herda o escopo do pai, ou seja, o escopo global nesse caso
}

Espero ter conseguido explicar de uma maneira clara :)

muito obrigado Lucas. consegui entender muito bem : )