Resumo : neste tutorial você aprenderá sobre o bind()
método JavaScript e saberá como usá-lo de forma eficaz.
Introdução ao bind()
método JavaScript
O bind()
método retorna uma nova função que, quando invocada, tem seus this
conjuntos com um valor específico.
O seguinte ilustra a sintaxe do bind()
método:
fn.bind(thisArg[, arg1[, arg2[, ...]]])
Linguagem de código: CSS ( css )
Nesta sintaxe, o bind()
método retorna uma cópia da função fn
com o this
valor específico ( thisArg
) e argumentos ( arg1
, arg2
,…).
Ao contrário dos métodos call()
e apply()
, o bind()
método não executa a função imediatamente. Ele apenas retorna uma nova versão da função cujos this
conjuntos são thisArg
argumentos.
Usando JavaScript bind()
para vinculação de função
Quando você passa um método, um objeto é para outra função como callback , o this
é perdido. Por exemplo:
let person = {
name: 'John Doe',
getName: function() {
console.log(this.name);
}
};
setTimeout(person.getName, 1000);
Linguagem de código: JavaScript ( javascript )
Saída:
undefined
Linguagem de código: JavaScript ( javascript )
Como você pode ver claramente na saída, os person.getName()
retornos undefined
em vez de 'John Doe'
.
Isso ocorre porque setTimeout()
recebeu a função person.getName
separadamente do person
objeto.
A declaração:
setTimeout(person.getName, 1000);
Linguagem de código: CSS ( css )
pode ser reescrito como:
let f = person.getName;
setTimeout(f, 1000); // lost person context
Linguagem de código: JavaScript ( javascript )
O this
interior da setTimeout()
função é definido para o objeto global no modo não estrito e undefined
no modo estrito.
Portanto, quando o retorno de chamada person.getName
é invocado, o name
não existe no objeto global, ele é definido como undefined
.
Para corrigir o problema, você pode agrupar a chamada do person.getName
método em uma função anônima , como esta:
setTimeout(function () {
person.getName();
}, 1000);
Linguagem de código: JavaScript ( javascript )
Isso funciona porque obtém o person
do escopo externo e depois chama o método getName()
.
Ou você pode usar o bind()
método:
let f = person.getName.bind(person);
setTimeout(f, 1000);
Linguagem de código: JavaScript ( javascript )
Neste código:
- Primeiro, vincule o
person.getName
método aoperson
objeto. - Segundo, passe a função vinculada
f
comthis
o valor definido para operson
objeto para asetTimeout()
função.
Usando bind()
para emprestar métodos de um objeto diferente
Suponha que você tenha um runner
objeto que possui o run
método ():
let runner = {
name: 'Runner',
run: function(speed) {
console.log(this.name + ' runs at ' + speed + ' mph.');
}
};
Linguagem de código: JavaScript ( javascript )
E o flyer
objeto que possui o fly()
método:
let flyer = {
name: 'Flyer',
fly: function(speed) {
console.log(this.name + ' flies at ' + speed + ' mph.');
}
};
Linguagem de código: JavaScript ( javascript )
Se você deseja que o flyer
objeto possa ser executado, você pode usar o bind()
método para criar a run()
função com os this
conjuntos do flyer
objeto:
let run = runner.run.bind(flyer, 20);
run();
Linguagem de código: JavaScript ( javascript )
Nesta declaração:
- Chame o
bind()
método dorunner.run()
método e passe o objeto flyer como o primeiro argumento e 20 como o segundo argumento. - Invoque a
run()
função.
Saída:
Flyer runs at 20 mph.
A capacidade de pegar emprestado um método de um objeto sem fazer uma cópia desse método e mantê-lo em dois locais separados é muito poderosa em JavaScript.
Resumo
- O
bind()
método cria uma nova função que, quando invocada, define osthis
conjuntos para um valor fornecido. - O
bind()
método permite que um objeto pegue emprestado um método de outro objeto sem fazer uma cópia desse método. Isso é conhecido como empréstimo de função em JavaScript.