Explique `Function.prototype.bind`

O método bind() cria uma nova função que, quando chamada, tem sua palavra-chave this definida para o valor fornecido, com uma determinada sequência de argumentos precedendo qualquer um fornecido quando a nova função é chamada.

Source: Function.prototype.bind() - JavaScript | MDN

bind() é mais útil para vincular o valor do this em métodos de classes que você quer passar para outras funções. Isso foi frequentemente feito em métodos de classe de componente React que não foram definidos usando arrow functions.

const john = {
  age: 42,
  getAge: function () {
    return this.age;
  },
};

console.log(john.getAge()); // 42

const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined

const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42

const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

No exemplo acima, quando o método getAge é chamado sem um objeto chamado (como unboundGetAge), o valor é 'indefinido' porque o valor 'this' dentro de getAge() se torna o objeto global. boundGetAge() tem seu this ligado a john, portanto pode obter o idade de john.

Podemos até usar getAge em outro objeto que não é john! boundGetAgeMary retorna o age (idade) de mary.

Prática

Tente implementar seu próprio método Function.prototype.bind() na Great Front End.

Referências

• Function.prototype.bind() - JavaScript | MDN