this
dinâmico
O bind
resolve um problema causado pelo contexto do JavaScript
, ele provê uma maneira de garantir que mesmo desacoplando uma função de um objeto o comportamento dele continue o mesmo, garantindo assim uma integridade do comportamento da função. Isso é interessante no caso de programação funcional
, onde o ideal é termos funções puras
, que possuem como parte de sua ideologia ser uma função sem efeito colateral.
Um exemplo do problema:
function Usuario() {
this._nome = '';
this.setNome = function(nome) {
this._nome = nome;
};
this.getNome = function() {
return this._nome;
};
}
var johnDoe = new Usuario();
johnDoe.setNome('John Doe');
console.log(johnDoe.getNome()); // 'John Doe'
Aqui temos uma simples função construtora que serve para representar a entidade de usuários no nosso sistema. Note que ela não usa de bind
, e por estarmos usando o objeto johnDoe
, o contexto da função não sofre com problema algum. Os problemas de não se usar um bind
(ou outra solução) nesse caso só aparecem quando desacoplamos a função do objeto.
var johnDoe = new Usuario();
var setNome = johnDoe.setNome;
setNome('John Doe');
console.log(johnDoe.getNome()); // ''
console.log(window._nome)); // 'John Doe'
Quando desacoplamos uma função para uma variável, o contexto da função passa a ser o contexto global, então o seu comportamento é totalmente quebrado. Note que o problema também ocorre quando você passa a função como parâmetro para outra função.
var johnDoe = new Usuario();
function popularNome(setNome) {
setNome('John Doe');
}
popularNome(johnDoe.setNome);
console.log(johnDoe.getNome()); // ''
console.log(window._nome)); // 'John Doe'
Quando trabalhamos com eventos do DOM
, onde registramos uma função para escutar um evento também temos um problema similar, isso porque o contexto da função é modificado na chamada pelo escutador de eventos. Quando a função registrada em um evento é chamado, o escopo da função passa a ser o elemento que acionou a ação. Como o onClick
é um evento, se o bind
não fosse feito, ele teria esse problema:
var usuario = {
_nome: '',
setNome: function(event) {
this._nome = event.target.value;
}
};
var elNome = document.getElementById('nome');
// O contexto da função setNome seria
// equivalente ao "elNome"
elNome.addEventListener('keyup', usuario.setNome);
Exemplo do problema: https://jsfiddle.net/fvenq166/