boa noite, não estou conseguindo entender muito bem o this com a Arrow Functions poderia me dar uns exemplo um pouco básicos usando o this com Arrow Functions por favor
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
boa noite, não estou conseguindo entender muito bem o this com a Arrow Functions poderia me dar uns exemplo um pouco básicos usando o this com Arrow Functions por favor
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 : )