Using .apply or .call methods in JavaScript constructors and functions

This is by no means an authoritative article on the apply and call methods, however I wanted to highlight their basic usage because I could not find any simple examples online; and I like simplicity.

In essence, the  apply and call methods are:

1. Available to all functions, to help you load in parameters into a function
2. The methods themselves take two parameters: (1) an object and (2) a set of parameters
3. apply takes an ['array', 'of','parameters'] whereas call takes a 'comma', 'separated', 'list'

Let's start with an example of a standard constructor function:

Simple Constructor

function construct(prop1, prop2, prop3) { this.prop1 = prop1; this.prop2 = prop2; this.prop3 = prop3; } var _1 = new construct(); var _2 = new construct(); construct.apply(_1, ['one', 'two', 'three']); construct.call(_2, 'one', 'two', 'three'); console.log(_1); console.log(_2);

In this example we:

• First create the constructor construct
• Create two instances of the constructor using variables var _1 and var _2, which then each become an object
• apply an array to var _1 and call a set of parameters to var _2
• Log the variables using console.log

What's important to note is that the constructor instance first had to be initialized to a variable before the apply or call methods could be used on it. This is because the methods require an object as their first argument.

So once the objects have been created, we now have two objects based upon our blueprint construct. These objects by themselves are empty. If we were to do a console.log on them we would see that they have properties without values. Values will just show as undefined.

Then we apply the methods onto the objects and automagically the properties of the object now have values! Don't you just LOVE JavaScript? (OK, maybe not like I do ;D)

Function

Here is how to use these methods in a standard function. The only caution I would give is over performance, since the apply and call methods are much slower than just directly calling the function('with', 'parameters');. So, use it only if you really need to! Here goes:

function do_something(a, b, c) { return console.log(a + b + c); } do_something.apply(this, [' one ', ' two ', ' three ']); do_something.call(this, ' one ', ' two ', ' three ');

Constructor with args

Back to constructors, but this time an example without using the apply method, just to show you that its not all that magical. The same effect can be achieved with a simple for loop.

function construct_args(prop1, args) { this.prop1 = prop1; var num = 2; for (var prop = 0; prop < args.length; prop++) { this['prop' + num] = args[prop]; ++num; } return console.log(this); } var _3 = new construct_args('one', ['two', 'three']);

Anonymous Constructor with .apply()

I have no idea why you would want to use the following pattern but it uses an anonymous constructor function which is self-initialized with the apply method:

var args = ['one', 'two', 'three']; var _4 = new $constructor; (function(prop1, prop2, prop3) { this.prop1 = prop1; this.prop2 = prop2; this.prop3 = prop3; return console.log(this); }).apply(_4, args);

You can see and test all these code examples here: http://jsfiddle.net/jasdeepkhalsa/5TysW/

Any questions, comments, additions, please leave a comment.