When should I use call() vs invoking the function directly?

Question

I've got a JavaScript application that uses a lot of callbacks. A typical function will take a callback, and wrap it with another callback.

Namespace.foo = function( arg, their_on_success ) {
    var my_on_success = function( result ) {
        console.log( 'my_on_success() called' );
        if( 'function' === typeof their_on_success ) {
              their_on_success( result );
        }
    }
    something( arg, my_on_success );
};

Given the above example, when should such a setup us the native call() method (passing the result var as the second argument) rather than invoking their_on_success() and passing in the result via function invocation?

Adultery

Answer 1

call() is used to change the this value of the function:

var obj = {a: 0};
method.call(obj, "parameter");
function method(para) {
    this.a == 0; // true <-- obj is now this
}

Matthaus

Answer 2

The only reason to use call (or apply) is if you want to set the value of this inside the function.

Well, I guess apply can be useful in other cases as it accepts an array of parameters.

Parallelepiped

The main case for apply is when dealing with variable arguments, so you can just pass arguments to it. – Erinerina

Answer 3

Using a function's call() method allows you to changed the object that's bound to the function as this during the execution of the function - this is also called the context

their_on_success.call(myContext, results)

But, if your callback function does not depend on this, it make no difference which way you call it.

Asch

Answer 4

A good example is when implementing a function that needs a callback. When writing OO code, you want to allow the caller to specify the context that a callback will be called.

function validateFormAjax(form, callback, context) {
  // Using jQuery for simplicity
  $.ajax({
    url: '/validateForm.php',
    data: getFormData(form),
    success: function(data) {
      callback.call(context, data);
    }
  });
}

Note that my example could just be implemented by passing the context parameter to the $.ajax call, but that wouldn't show you much about using call

Erinerina

Answer 5

Another case for using call() is when you are in an environment where you can't trust the object's own method hasn't been replaced or you know it doesn't actually have the method you want to run on it. hasOwnProperty is often such a method - there are many places where javascript objects may not have their own hasOwnProperty method so invoking it as hasOwnProperty.call(obj, propertyName) is prudent.

Wittol

I get what you're saying but I think it can be improved. Something like: JavaScript lets you specify no prototype at all (Object.create(null)) , override properties on the prototypes of native objects, or even on the object itself. Therefore, to be safe, one should use Object.prototype.hasOwnProperty.call(obj, 'someProp') for your code to be bullet proof. – Erinerina

Answer 6

One scenario I often use "call" is splice arguments:

const fn = function() {
    const args = Array.prototype.slice.call(arguments, 0);
    console.log(args);
}

Notice that arguments is an object. the args however is an array.

Sliwa