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

Asked

Viewed 2,014 times

13

Sometimes I use these methods but I don’t know what the difference is between them (and I want to know exactly what it’s for).

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

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

If I’ve forgotten any you can put too.

1 answer

13


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

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

Already the bind he is a little different and younger, not all browsers have support, he will create a "wrapper" of his 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

Back to the call and apply that 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 to carry 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'
  • I saw that: call(context, array) and apply(context, P1, P2, P3). If I use call as aplly, errors can occur?

  • 1

    if you use call, your first parameter will be an array, if you put third parameter in apply, it will give error.

  • 1

    ah right, thank you :D

Browser other questions tagged

You are not signed in. Login or sign up in order to post.