Fácil JavaScript

Corrigindo o contexto com bind

Enunciado

Dado o objeto usuario com a propriedade nome e o método dizerOla, crie uma função saudacao que seja uma versão do método dizerOla com o this fixado no objeto usuario. Em seguida, chame saudacao() e imprima a saudação correta.

Requisitos

  • Use bind para fixar o this.
  • A função saudacao deve ser uma nova função.
  • A saída deve conter o nome do usuário.

Código inicial

const usuario = {
  nome: 'Carlos',
  dizerOla: function() {
    console.log(`Olá, meu nome é ${this.nome}`);
  }
};

// Crie a função saudacao usando bind e chame-a

Saída esperada

Olá, meu nome é Carlos
Ver dica

Use usuario.dizerOla.bind(usuario) para criar a função.

Mostrar solução 
const usuario = {
  nome: 'Carlos',
  dizerOla: function() {
    console.log(`Olá, meu nome é ${this.nome}`);
  }
};

// Cria uma nova função com this fixado em usuario
const saudacao = usuario.dizerOla.bind(usuario);
saudacao(); // Olá, meu nome é Carlos

Passo a passo

  1. Definimos o objeto usuario com a propriedade nome e o método dizerOla.
  2. O método dizerOla usa this.nome para acessar o nome do objeto.
  3. Usamos usuario.dizerOla.bind(usuario) para criar uma nova função saudacao com this permanentemente ligado a usuario.
  4. Chamamos saudacao(), que executa o corpo do método original com o this correto.
  5. O console imprime a saudação com o nome 'Carlos'.

Por que funciona

O método bind cria uma nova função que, quando chamada, tem seu this fixado ao primeiro argumento passado (neste caso, usuario). Assim, mesmo que a função seja chamada sem um objeto à esquerda (como saudacao()), o this dentro dela continua sendo usuario. Isso resolve o problema de perda de contexto.

Erros comuns

  • Esquecer de chamar bind: const saudacao = usuario.dizerOla; saudacao(); resulta em this global ou undefined (em modo estrito), e this.nome será undefined. Corrija com bind.
  • Passar o objeto errado: usuario.dizerOla.bind({ nome: 'Outro' }) fixa this em outro objeto, resultando em 'Outro'. Use o objeto correto.
  • Usar arrow function no método: Se dizerOla fosse uma arrow function, this seria léxico e bind não teria efeito. Prefira funções tradicionais para métodos que usam this.

Outra forma de resolver

Podemos usar call para invocar imediatamente: usuario.dizerOla.call(usuario). Porém, bind é preferível quando precisamos de uma função reutilizável, como em callbacks.

Saída esperada

Olá, meu nome é Carlos