Javascript #1: Function.prototype.bind

Olá pessoal, tudo certo!?

Hoje iniciarei um novo tópico voltado à javascript. Para começar escreverei sobre a função bind que foi introduzida no ECMAScript-262. A adição desta função ao ECMAScript retira a necessidade de funções auxiliares em frameworks para chamar/criar uma função em um escopo passando determinados parâmetros.

O que é a função bind

Na 5ª edição do ECMAScript-262 (atual) foi introduzida a função bind().

Funtion.prototype.bind(thisArg[,arg1, arg2, …]);

Esta função recebe como parâmetros: um escopo (thisArg) e uma sequência de parâmetros que serão adicionados à chamada da função. Para ficar mais claro, vamos à um exemplo.


x = 7;

var obj = {
    x : 3,
    multiplicar: function(y)
    {
        return this.x * y;
    }
};

var m = obj.multiplicar;
obj.multiplicar(3); // 9, o escopo é obj
m(4); // 28, o escopo é global (window)

var objM = m.bind(obj);
objM(4); // 12, o escopo é o objeto

O comportamente acima lembra o uso das funções Function.prototype.call e Function.prototype.apply. Enquanto call e apply executam a função, bind cria uma nova função com o mesmo corpo e a retorna. Uma grande aplicação para a função bind são partial functions.


function multiplicar(x, y)
{
    return x * y;
}

var multiplicarPor5 = multiplicar.bind(undefined, 5); // adiciona o parâmetro 5 para todas as chamadas
multiplicarPor5(3); // 15

Compatibilidade

Por ser uma adição mais recente ao ECMAScript não são todos os navegadores que suportam a função bind. Uma forma de emular o comportamento desta função seria:

Function.prototype.bind = function(scope /* [, arg1, arg2, ...] */)
{
    var fn = this, // guarda a função
        args = Array.prototype.slice.call(arguments, 1); // toArray() removendo scope
    return function()
    {
    // chama função com o escopo e concatenando os parâmetros
        return fn.apply(scope, args.concat(Array.prototype.slice.call(arguments)));
    };
};

Você pode ver quais navegadores suportam Function.prototype.bind aqui.

Este tutorial da MDN também explica o uso e como funciona a função bind.

Para hoje é isso.  🙂

Abraço.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s