Método JavaScript bind()

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 thisconjuntos 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 fncom o thisvalor 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 thisconjuntos são thisArgargumentos.

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:

undefinedLinguagem de código:  JavaScript  ( javascript )

Como você pode ver claramente na saída, os person.getName()retornos undefinedem vez de 'John Doe'.

Isso ocorre porque setTimeout()recebeu a função person.getNameseparadamente do personobjeto.

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 contextLinguagem de código:  JavaScript  ( javascript )

O thisinterior da setTimeout()função é definido para o objeto global no modo não estrito e undefinedno modo estrito.

Portanto, quando o retorno de chamada person.getNameé invocado, o namenão existe no objeto global, ele é definido como undefined.

Para corrigir o problema, você pode agrupar a chamada do person.getNamemé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 persondo 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.getNamemétodo ao personobjeto.
• Segundo, passe a função vinculada fcom thiso valor definido para o personobjeto para a setTimeout()função.

Usando bind()para emprestar métodos de um objeto diferente

Suponha que você tenha um runnerobjeto que possui o runmétodo ():

let runner = {
    name: 'Runner',
    run: function(speed) {
        console.log(this.name + ' runs at ' + speed + ' mph.');
    }
};Linguagem de código:  JavaScript  ( javascript )

E o flyerobjeto 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 flyerobjeto possa ser executado, você pode usar o bind()método para criar a run()função com os this  conjuntos do flyerobjeto:

let run = runner.run.bind(flyer, 20);
run();Linguagem de código:  JavaScript  ( javascript )

Nesta declaração:

• Chame o bind()método do runner.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 os thisconjuntos 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.