This, bind, call e apply

Eu demorei um pouco para entender como realmente o This funciona no JavaScript. Por ter um comportamento um pouco esquisito, e diferente.

Basicamente, o This é o objeto onde a função foi chamda / o objeto que chamou a função.

Bind, Call e Apply são formas de manipular o This.

Bind

Bind, é uma forma de "amarrar" o This a um objeto específico, retornando uma nova função com o This fixado.

⧉const obj = {
  nome: 'Zelchi',
  falar: function() {
    console.log(this.nome);
  }
}
 
const falarDeObj = obj.falar.bind(obj); // <- Amarrando o obj ao This
 
falarDeObj(); // Zelchi

O bind devolve uma nova função, que independente de onde é chamada, o This sempre será o obj, por estar amarrado a ele.

Call e Apply

Call e Apply são bem parecidos, ambos são formas de chamar a função e aplicar o This em um objeto, durante o "chamamento".

⧉const obj = {
  nome: 'Zelchi',
  falar: function() {
    console.log(this.nome);
  }
}
 
const falarDeObj = obj.falar; // <- Colocando o método falar em uma variável sem amarrar o This
 
falarDeObj(); // undefined

Nesse caso o This é o objeto global, porque a função falar foi chamada sozinha, e não por um objeto, e tambem por não ter nenhum objeto amarrado a ela.

⧉const obj2 = {
  nome: 'Thiago'
}
 
const falarDeObj = obj.falar; // <- Ainda sem amarrar o This
 
falarDeObj.call(obj2); // Outro objeto
falarDeObj.apply(obj2); // Outro objeto

Já nesse caso, tanto o Call quanto o Apply, chamam a função falarDeObj, mas aplicam o This do obj2, fazendo com que o console.log imprima "Outro objeto".

O que muda entre o Call e Apply, é a forma como os argumentos são passados para a função.

⧉obj3 = {
    nome: 'Calculadora',
    somar: function(a, b) {
        return a + b;
    }
}
 
obj3.somar.call(null, 2, 3); // 5
obj3.somar.apply(null, [2, 3]); // 5

No Call, os argumentos são passados diretamente, enquanto no Apply, os argumentos são passados como um array. Apply é útil quando você não sabe quantos argumentos serão passados para a função. por exemplo.

⧉function encontrarMaiorNumero() {
    return Math.max.apply(null, arguments);
}
 
const maior = encontrarMaiorNumero(1, 5, 3, 9, 2); // 9
console.log(maior); // 9

outro exemplo é quando você quer usar o Apply para passar um array como argumentos para uma função que não aceita arrays.

⧉function somar(a, b, c) {
    return a + b + c;
}
 
const numeros = [1, 2, 3];
const resultado = somar.apply(null, numeros); // 6
console.log(resultado); // 6

Resumo dos tipos de Binding do This

Default Binding -> Quando uma função é chamada sozinha, o This dentro da função se refere ao objeto global (ou undefined no modo estrito).

New Binding -> Quando uma função é chamada com o operador new, o This dentro da função se refere ao novo objeto criado.

Implicit Binding -> Quando uma função é chamada como um método de um objeto, o This dentro da função se refere a esse objeto.

Lexical Binding -> Funções arrow não têm seu próprio This, elas herdam o This do contexto onde foram definidas.

Hard Binding -> Usar bind para fixar o This a um objeto específico, independentemente de como a função é chamada.