Médio JavaScript

Call, apply e bind na prática

Enunciado

Crie uma função apresentar que recebe idade e cidade e usa this.nome para montar uma frase. Depois, use call, apply e bind para invocar essa função com o objeto pessoa e os argumentos 30 e 'Rio de Janeiro'. Imprima o resultado de cada invocação.

Requisitos

  • A função apresentar deve usar this.nome.
  • Use call com argumentos separados.
  • Use apply com um array de argumentos.
  • Use bind para criar uma função e depois chame-a.

Código inicial

const pessoa = { nome: 'Mariana' };

function apresentar(idade, cidade) {
  // complete
}

// Use call, apply e bind

Saída esperada

Mariana, 30 anos, de Rio de Janeiro
Mariana, 30 anos, de Rio de Janeiro
Mariana, 30 anos, de Rio de Janeiro
Ver dica

Lembre-se: call recebe argumentos separados por vírgula; apply recebe um array; bind retorna uma função.

Mostrar solução 
const pessoa = { nome: 'Mariana' };

function apresentar(idade, cidade) {
  console.log(`${this.nome}, ${idade} anos, de ${cidade}`);
}

// call: this e argumentos separados
apresentar.call(pessoa, 30, 'Rio de Janeiro');

// apply: this e array de argumentos
apresentar.apply(pessoa, [30, 'Rio de Janeiro']);

// bind: cria função com this fixo
const apresentarMariana = apresentar.bind(pessoa);
apresentarMariana(30, 'Rio de Janeiro');

Passo a passo

  1. Definimos o objeto pessoa com a propriedade nome.
  2. Criamos a função apresentar que usa this.nome e os parâmetros idade e cidade.
  3. Usamos apresentar.call(pessoa, 30, 'Rio de Janeiro'): o primeiro argumento é o this, os demais são passados individualmente.
  4. Usamos apresentar.apply(pessoa, [30, 'Rio de Janeiro']): o primeiro argumento é o this, o segundo é um array com os argumentos.
  5. Usamos apresentar.bind(pessoa) para criar apresentarMariana, que tem this fixo em pessoa. Depois, chamamos apresentarMariana(30, 'Rio de Janeiro').
  6. Cada chamada imprime a mesma frase, pois o this é sempre pessoa.

Por que funciona

call e apply invocam a função imediatamente, definindo o this para o primeiro argumento. A diferença está na forma de passar os argumentos: call aceita uma lista, apply aceita um array. bind não invoca a função; retorna uma nova função com o this fixado, que pode ser chamada depois. Todos permitem controlar explicitamente o contexto de execução.

Erros comuns

  • Passar argumentos errados para apply: apresentar.apply(pessoa, 30, 'Rio') causa erro, pois apply espera um array como segundo argumento. Use [30, 'Rio'].
  • Esquecer de chamar a função após bind: const f = apresentar.bind(pessoa); não executa; é preciso f(30, 'Rio').
  • Usar call com array: apresentar.call(pessoa, [30, 'Rio']) passaria um array como idade, resultando em [30, 'Rio'] anos. Use argumentos separados.

Outra forma de resolver

Poderíamos usar Reflect.apply(apresentar, pessoa, [30, 'Rio de Janeiro']), que é equivalente ao apply. No entanto, call/apply/bind são mais comuns e legíveis.

Saída esperada

Mariana, 30 anos, de Rio de Janeiro
Mariana, 30 anos, de Rio de Janeiro
Mariana, 30 anos, de Rio de Janeiro