How to implement an application template in Javascript

Question

What is the Javascript call pattern applied to function call patterns and how to use it? What are the benefits of using this call pattern.

Answer 1

Using apply is related to the context of the function ( this ) and passing arguments.

First, I think you should know when the this keyword is implicitly set:

1- When a function is called as a method (a function is called as a member of an object):

 obj.method(); // 'this' inside method will refer to obj 

2- Normal function call:

 myFunction(); // 'this' inside the function will refer to the Global object // or (function () {})(); 

3- When the new operator is used:

 var obj = new MyObj(); // this will refer to a newly created object. 

That's when apply and call come in, these methods allow you to set the context explicitly when calling the function, for example:

 function test(a) { alert(this + a); } test.call('Hello', ' world!'); 

In the above code, when the test function is called, setting the this to String ( 'Hello' ) and passing the argument a ( ' world.' ).

Both, call and apply change the context of the executing function ( this ) inside the called function, but the difference between them is that with apply , you can send an Array or Array-like object as arguments to the function that will be executed, which is extremely useful for example:

 function sum() { var result = 0; for (var i = 0; i < arguments.length; i++) { result += arguments[i]; } return result; } var args = [1,2,3]; sum.apply(null, args); // will return 6 

This can lead to very unpleasant, bad (and general) eval calls like:

 eval('sum(' + args.join() +')'); 

In another example, the Math.max and Math.min methods, these methods can take an arbitrary number of arguments, such as:

 var max = Math.max(2,4,6,8); // 8 

But what if you have an array of numbers?

 var numbers = [2,4,6,8]; numbers.push(10); var max = Math.max.apply(null, numbers); // 10 

Also note that when null or undefined used as the this argument with call or apply , the this object will refer to the Global object (similar to case # 2, calling a normal function).

For the Math.max example, the context is not significant because they are similar to the "static" methods, the this keyword is not used internally ...

Answer 2

You can also use call / apply for inheritance.

 function Client (id) { this.id = id; this.name = "Client" + id; } Client.prototype = { constructor: Client , toString: function () { return this.name; } }; function WebClient (id) { Client.call (this, id); } WebClient.prototype = new Client (); WebClient.prototype.constructor = WebClient; WebClient.prototype.ping = function () { // do stuff }; 

Note Client.call (this, id); Executes Client using the this instance created by new WebClient . So when

  this.id = id; this.name = "Client" + id; 

executed inside the Client instance of WebClient gets the properties assigned to it.

Answer 3

I don’t know any design patterns called The Apply Pattern, so I really don’t think that this is related to design patterns at all. However, there is a method for applying function objects in javascript (along with the corresponding invocation method), so I will explain them.

The apply and call methods basically allow an object to "steal" a method from another object. You see that in javascript methods are connected very, very late: during a call. Only when the method is called is this 'this' value permitted. In a regular method call:

 some_object.do_something(); 

the 'this' in do_something refers to some_object. Apply and call allows you to reassign 'this' . For example:

 some_object.do_something.apply(another_object); 

the keyword 'this' in do_something now refers to another_object. So you call the do_something method, owned by some_object, on another_object.

Now, this is interesting and all but why does anyone want to do this? Here is a concrete example of why this is useful:

 // say you want to get some DIVs in the document, you can get all of them with: var some_divs = document.getElementsByTagName('DIV'); // say you want the third to fifth DIV in the document, some_divs looks like an // array so you might think you can slice it, but it not. It a collection // of elements that fakes being an array and doesn't implement the slice method. // No worries, we can steal the slice method from an array // and apply it to some_divs: var wanted_divs = [].slice.apply(some_divs,[2,5]); // Alternatively: var wanted_divs = [].slice.call(some_divs,2,5); 

There is another use case that results from the difference between how the application and the call work. If you have all the arguments in the array, and the function expects the individual arguments that you can use to apply to the array, and the function sees the contents of the array as separate arguments:

 function some_function (first,second) { alert(first+second); } var argument_array = ['hello','world']; some_function.apply(null, argument_array);