The difference between apply and call method in javascript
Well, I have just an issue from my friend who have a problem with arguments passed in the extended method. This topic I will show the difference between apply and call method.
First, what is call and apply method. This is a hard question for me to explain this kind of question in English. Haha. But I will try. Instead of explain myself I decided to lift somebody’s context up from This
apply
Syntax
functionreference.apply(thisArg, argArray)
Parameters
thisArg (parameter for the calling object)
argArray (an optional parameter of an argument array for the object)
Description
apply allows you to apply a method of another object in the context of a different object (the calling object). You can assign a different this object when calling an existing function. this refers to the current object, the calling object. With apply, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.
call
Syntax
functionreference.call(thisArg, arg1, arg2, …)
Parameters
thisArg (parameter for the calling object)
arg1, arg2, … (an optional parameters of arguments for the object)
Description
call allows you to call (executes) a method of another object in the context of a different object (the calling object). You can assign a different this object when calling an existing function. this refers to the current object, the calling object. With call, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.
This is an example.
Tags: javascript
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
var total = 0;
for ( var i=0; i<arguments.length; i++ )
{
total += arguments[i];
}
console.log( "length of arguments", arguments.length );
console.log( "arg0" , arguments[0] );
console.log( "arg1" , arguments[1] );
this.name = name;
}
Person.prototype.getName = function()
{
return this.name;
}
// class User (will be subclassing Person)
function User(name, pwd)
{
// Constructor Chaining (calling superclass constructor)
Person.apply(this, arguments);
Person.call(this,name,pwd);
this.pwd = pwd;
}
var user = new User( "Toy", "Toy1" );
Tutorial Javascript : Stealing methods from Other Objects
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
document.write( "Before Slicing : " );
printArray( arguments );
document.write("<br/>");
//steal slice from Array.prototype
var slice = Array.prototype.slice;
var slicedArguments = slice.call( arguments, 1 );
document.write( "After Slicing : " + slicedArguments);
}
function printArray( arry )
{
for( var i = 0; i < arry.length ; i++ )
{
document.write( arry[ i ] + "," );
}
}
copyFromArray( 1,3,5 ) ;
Tutorial : Convert a table to XML
Javascript file
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{
var xmlStr = '<Data>';
for( var k = 0 ; k < v.length ; k++ )
{
xmlStr += '<Row>';
for( var l = 0 ; l < h.length ; l++ )
{
xmlStr += '<' + h[ l ].innerHTML + '>';
xmlStr += v[ k ][ l ];
xmlStr += '</' + h[ l ].innerHTML + '>';
}
xmlStr += '</Row>';
}
xmlStr += '</Data>';
return xmlStr;
}
function getHeaders( trs )
{
var headers = trs[0];
var tds = headers.getElementsByTagName( 'td' );
return tds;
}
function initialArray( arr )
{
for( var i = 0 ; i < arr.length ; i++ )
{
arr[ i ] = new Array();
}
return arr;
}
function extract( table_id )
{
var table = document.getElementById( table_id );
var trs = table.getElementsByTagName( 'tr' );
var headers = getHeaders( trs );
var myTds = new Array( trs.length - 1 );
myTds = initialArray( myTds );
for( var i = 1 ; i < trs.length ; i++ )
{
var tds = trs[ i ].getElementsByTagName( 'td' );
for( var j = 0 ; j < tds.length ; j++ )
{
myTds[ i - 1 ].push( tds[ j ].innerHTML );
}
}
return getXMLFromArrays( headers , myTds );
}
function printXML()
{
console.log( extract( 'table' ) );
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<p>
<input value="Extract!" type="button" onclick="printXML();" />
</p>
<table id="table" border="1">
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<td>Value7</td>
<td>Value8</td>
</tr>
</table>
</body>
Tutorial : Flex convert object to xml
This is CustomerDTO.as that extends DTOBean.as
This is the base class for every DTO.
2
3
4
5
6
7
8
9
10
{
public class DTOBean
{
public function DTOBean()
{
}
}
}
Here is our hero ObjectConverter.as
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
import flash.xml.XMLDocument;
import flash.xml.XMLNode;
import mx.rpc.xml.SimpleXMLEncoder;
public class ObjectConverter
{
public function ObjectConverter()
{
}
/**
* Converting DTO Bean object to XML
*/
public function objectToXML(dtoBean:DTOBean):XML
{
var qName:QName = new QName("form");
var xmlDocument:XMLDocument = new XMLDocument();
var simpleXMLEncoder:SimpleXMLEncoder = new SimpleXMLEncoder(xmlDocument);
var xmlNode:XMLNode = simpleXMLEncoder.encodeValue(dtoBean, qName, xmlDocument);
var xml:XML = new XML(xmlDocument.toString());
return xml;
}
}
}
The last one
2
3
4
5
6
7
8
9
10
11
12
13
import actionScript.ObjectConverter;
import actionScript.CustomerDTO;
var converter:ObjectConverter = new ObjectConverter();
var customer:CustomerDTO = new CustomerDTO();
customer.name = "Noppanit";
customer.surname = "Charassinvichai";
var xml:XML = converter.objectToXML( customer );
Alert.show( xml.toXMLString() );
Tutorial : Flex Profiler
This is the tutorial for flex profiler. It’s good for the beginners to finding a leaking object. !!
http://blogs.adobe.com/aharui/profiler/ProfilerScenarios.swf