What is the difference between the apply, call and bind methods when calling a function in Javascript?

11

Sometimes I use these methods but I do not know the difference between them (and I want to know what exactly that is for).

function load( arg ) {
    console.log( this, arguments );
}

load.apply('www', 'sss');
load.call('www', 'sss');
load.bind('www')

If I have forgotten some can put too.

    
asked by anonymous 05.02.2014 / 15:55

1 answer

12

They are all prototypes of object Function where it aims to execute a function passing through it a different context and arguments.

  • call : context, param1, param2, param3, ...
  • apply : context, array of parameters

bind is a little different and newer, not all browsers are supported, it will create a wrapper of your function, resulting in a new function, with context and fixed arguments .

For example:

function foo(nome, idade) { return 'ola '+nome+', você tem '+idade}

var joao = foo.bind(window, 'joao');
joao('23'); // ola joao, você tem 23
joao('26'); // ola joao, você tem 26

// o que é o mesmo que:
var joao = function (idade) {
    return foo('joao', idade);
}
// porém evita bastante rescrita no seu código
// mantive o argumento nomeado como 'idade' para fins didaticos o que
// é feito na realidade é não passar argumentos e o segundo argumento em
// foo seria 'arguments[0]' dentro da função anonima do joao que é um wrapper

Returning to the call and apply which are very similar, let's talk about context.

pessoa = { 
    idade: 10, 
    bar: function (nome) { 
        return 'ola '+nome+', vc tem '+this.idade+' anos';
    }
};

pessoa2 = {
    idade: 20
}

pessoa.bar('joao'); // ola joao, vc tem 10 anos

// Pessoa 2 não tem o método bar, mas podemos usar da pessoa emprestado
pessoa.bar.call(pessoa2, 'joao'); // ola joao, vc tem 20 anos

//ou com apply

pessoa.bar.apply(pessoa2, ['joao']);  // ola joao, vc tem 20 anos

Call is very good for carrying arguments from one method to another.

function fazerAlgo(callback, arg1, arg2) {
    var args = Array.prototype.splice.call(arguments, 1);
    return callback.apply(this, args);
}

fazerAlgo(function (arg1, arg2) {
    console.log(arg1);
    console.log(arg2);
}, 'foo', 'bar');
// Escreve no console:
// 'foo'
// 'bar'
    
05.02.2014 / 16:12