Vamos entender mais sobre os métodos call e apply do Javascript. Esses métodos nos deixam invocar outros métodos como se estivéssemos no contexto de um outro objeto.

Parece um pouco confuso mas logo logo vamos entender melhor!

Vamos ver o seguinte bloco de código

1
2
3
4
5
6
7
8
9
10
11
let filme = { title: 'Harry Potter', descritpion: 'Descrição do filme' };

function exibirFilmeComDescricao() {
console.log(this.title + " " + this.descritpion);
}

exibirFilmeComDescricao.call(filme);
// Harry Potter - Descrição do filme

exibirFilmeComDescricao.apply(filme);
// Harry Potter - Descrição do filme

Perceba que os métodos call e apply recebem um parâmetro, que nada mais é do que o próprio contexto onde a função será executada.
Ou seja, o valor do this que é usado dentro da função exibirFilmeComDescricao será o que você passar como parâmetro.

Mas então, tanto o apply quanto o call fazem exatamente a mesma coisa? Sim e não.

Existe uma pequena diferença entre eles. O segundo parâmetro.

Enquanto o apply aceita um array, o call precisa de uma lista de argumentos separados por vírgula.

1
2
3
4
5
6
7
8
9
10
11
12
13
let harry = { idade: 24 };

function maisVelho() {
for (let i = 0; i < arguments.length; i++) {
console.log(this.idade < arguments[i]);
}
}

maisVelho.call(harry, 30, 40, 15);
// true true false

maisVelho.apply(harry, [30, 40, 15]);
// true true false

Concluindo

Os métodos call e apply são bem importantes para reduzir a quantidade total de código que a sua aplicação terá, uma vez que você poderá reutilizar os métodos em contextos diferentes e além disso te ajuda a se manter nos caminhos do DRY (Don’t repeat yourself).