Olá, Marco! Beleza?
Quando criamos uma função na estrutura normal function nomeDaFuncao() { ... } e ela é passada para outros componentes, o contexto de execução dela não será mais o componente o qual ela faz parte. Assim, perdendo-se o contexto, perde-se a noção do this.
O bind irá evitar isso pois carrega o this que foi passado na função quando ela for executada. Esse this é recebido por parâmetro do bind. O bind é um método que faz parte das funções por padrão, por isso para chamarmos ele, precisamos acessá-lo pela função. Esse é o motivo de precisarmos escrever this.nomeFuncao.bind(), e como dito, o bind() recebe como parâmetro o this que deve ser acoplado, ficando this.nomeFuncao.bind(this).
Enfim, essa é a ideia principal. Não é relacionado a sobrecarga e sobreescrita, é um comportamento do próprio JavaScript. Inclusive, outra forma de "resolver" esse problema é usar arrow functions, porque funções usam o contexto léxico, ou seja, o contexto delas é o contexto em que foram declaradas. Nesse caso, você precisa apenas declarar uma arrow function:
nomeFuncao = () => {
console.log(this);
}
Outra forma é chamar o método da função em uma arrow function:
onClick={() => this.nomeFuncao()}
O problema desse caso é que cada renderização irá criar uma nova função (afeta a performance em casos extremos).
Resumidamente, o this é uma propriedade do JavaScript que possui um comportamento pouco previsível, dependendo de como a função é declarada ele se comporta de maneiras diferentes. O bind garante que quando o método for chamado fora da sua classe, em outro contexto, o this não mude ou se torne undefined. Arrow Functions também garantem isso, porque o this delas é sempre o mesmo (o objeto/classe em que foi declarada), mas como não é um método da classe, é recriada em memória sempre que uma atualização do componente ocorre.
Espero ter ajudado!
