Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Variável exibir

Oi pessoal!

No meu código deu tudo certo, mas eu gostaria de entender melhor a variável exibir.

Ao escrever const exibir = user.exibirInfos já não estou atrelando o contexto ao objeto user? Então qual seria a utilidade da criação da outra variável exibirTudo que contém o método bind, sendo que exibir já tem um contexto?

const user = {
    nome: "Hanni",
    idade: 19,
    nascimento: "2004/10/06",
    role: "singer",
    ativo: true,
    exibirInfos: function(){
        console.log(this.nome,this.idade)
    }
}

user.exibirInfos() // exibindo diretamente no terminal

const exibir = user.exibirInfos;
const exibirTudo = exibir.bind(user);

exibirTudo(); // exibe através da variável exibir
1 resposta
solução!

Olá, Nickolas! Tudo bem?

Quando você escreve const exibir = user.exibirInfos;, você está atribuindo à variável exibir a função exibirInfos do objeto user, mas sem o contexto do objeto user. Isso acontece porque em JavaScript, quando uma função é atribuída a uma variável, ela perde o contexto original (neste caso, o objeto user).

Por isso, quando você tenta executar a função através da variável exibir (ou seja, exibir()), o JavaScript não sabe a que o this se refere e retorna undefined.

Agora, quando você escreve const exibirTudo = exibir.bind(user);, você está utilizando o método bind para atrelar a função exibirInfos ao objeto user novamente. O método bind cria uma nova função que, quando chamada, tem seu this definido com o valor passado, neste caso, o objeto user.

Então, quando você executa exibirTudo(), a função exibirInfos é executada com o contexto do objeto user, e o this dentro da função se refere ao objeto user.

Para exemplificar, veja o código abaixo:

const user = {
    nome: "Hanni",
    idade: 19,
    nascimento: "2004/10/06",
    role: "singer",
    ativo: true,
    exibirInfos: function(){
        console.log(this.nome,this.idade)
    }
}

// Atribui a função exibirInfos à variável exibir, mas sem o contexto do objeto user
const exibir = user.exibirInfos;

// O this dentro da função exibir se refere ao objeto global, então retorna undefined
exibir(); // undefined

// Atribui a função exibirInfos à variável exibirTudo, com o contexto do objeto user
const exibirTudo = exibir.bind(user);

// O this dentro da função exibirTudo se refere ao objeto user, então retorna as informações do user
exibirTudo(); // Hanni 19

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software