<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>.NET Tips and Tricks &#187; Callback</title>
	<atom:link href="http://kossovsky.net/index.php/tag/callback/feed/" rel="self" type="application/rss+xml" />
	<link>http://kossovsky.net</link>
	<description>C# Code Snippets, ASP.NET Code Samples, .NET Tips and Tricks</description>
	<lastBuildDate>Sat, 25 Dec 2010 08:32:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Javascript function context, &#8220;apply&#8221; method and lost &#8220;this&#8221; object</title>
		<link>http://kossovsky.net/index.php/2009/07/function-context-and-apply-function/</link>
		<comments>http://kossovsky.net/index.php/2009/07/function-context-and-apply-function/#comments</comments>
		<pubDate>Sat, 11 Jul 2009 21:18:20 +0000</pubDate>
		<dc:creator>Maxim</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Callback]]></category>
		<category><![CDATA[fellow programmer]]></category>
		<category><![CDATA[javascript object]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[lame question]]></category>
		<category><![CDATA[request data]]></category>
		<category><![CDATA[script type]]></category>
		<category><![CDATA[server data]]></category>
		<category><![CDATA[solution number]]></category>
		<category><![CDATA[testthis]]></category>
		<category><![CDATA[text javascript]]></category>
		<category><![CDATA[Tips and Tricks]]></category>

		<guid isPermaLink="false">http://kossovsky.net/?p=519</guid>
		<description><![CDATA[How many times you had problem or were asked about what happened to this object in your function? Or why this is not an object you expect it to be? Probably these times you have to remind yourself or your fellow programmer about function context. First of all I have to ask you all a [...]<br /><div><img src="http://kossovsky.net/wp-content/plugins/gd-star-rating/gfx.php?value=4.9" /></div><div>Rating: 4.9/<strong>5</strong> (8 votes cast)</div><br /><a target="_blank" href="http://www.gdstarrating.com/"><img src="http://kossovsky.net/wp-content/plugins/gd-star-rating/gfx/powered.png" border="0" width="80" height="15" /></a><br />]]></description>
			<content:encoded><![CDATA[<p>How many times you had problem or were asked about what happened to <strong><em>this</em></strong> object in your function? Or why <strong><em>this</em></strong> is not an object you expect it to be? Probably these times you have to remind yourself or your fellow programmer about function context.<br />
First of all I have to ask you all a pretty lame question. If you write function in JS block right inside your HTML, what <strong><em>this</em></strong> keyword will refer to?</p>
<pre class="javascript" name="code">&lt;script type="text/javascript"&gt;
		function testThis(){
		  //who is "this"
		}
&lt;/script&gt;</pre>
<p>And now to the real example.<br />
<span id="more-519"></span><br />
Let’s say you build a simple Javascript object:</p>
<pre class="javascript" name="code">&lt;script type="text/javascript"&gt;
		var mathObj = {
			pi: 3.14,
			getCircumference : function(data) {
				alert(this.pi * 2 * data.radius);
			}
		}

		mathObj.getCircumference(10);
&lt;/script&gt;</pre>
<p>You have properties, you have functions, you can use <strong><em>this</em></strong> keyword to access properties of the object from its functions. Everyone is happy.<br />
Now we want to add function that will get some server data using AJAX and run one of the functions our object has.<br />
(To all who wondered what is $ stands for &#8211; I use JQuery framework in all my JS samples)</p>
<pre class="javascript" name="code">&lt;script type="text/javascript"&gt;
		var mathObj = {
			pi: 3.14,
			getCircumference : function(data) {
				alert(this.pi * 2 * data.radius);
			},
			getRemoteCircumference: function(url) {
				$.getJSON(url, this.getCircumference);
			}
		}

		mathObj.getRemoteCircumference("RadiusData.js");
&lt;/script&gt;</pre>
<p>If we have {&#8220;radius&#8221;:5} in RadiusData.js file you would expect the result of getCircumference would be 31.4 but you will get NaN. Why is that? Because <strong><em>this</em></strong> keyword in this case will refer to some kind of object with request data returned by JQuery. What can you do?<br />
Solution number one is to use your object name:</p>
<pre class="javascript" name="code">...
	getCircumference : function(data) {
		alert(mathObj.pi * 2 * data.radius);
	}
...</pre>
<p>Ugly. You don&#8217;t have to return on object name in every function.<br />
Solution number two is to use anonymous function and explicitly call your function:</p>
<pre class="javascript" name="code">
....
	getRemoteCircumference: function(url) {
		$.getJSON(url, function(data){
			mathObj.getCircumference(data);
		});
	}
...
</pre>
<p>Good enough solution, but again I don&#8217;t like reusing object name&#8230;<br />
And now to my favorite solution.</p>
<pre class="javascript" name="code">&lt;script type="text/javascript"&gt;
   function getContextFunc(context, func) {
       return function() {
           func.apply(context, arguments);
       };
   }

   var mathObj = {
       pi: 3.14,
       getCircumference: function(data) {
           alert(this.pi * 2 * data.radius);
       },
       getRemoteCircumference: function(url) {
          $.getJSON(url, getContextFunc(this, this.getCircumference));
       }
   }

   mathObj.getRemoteCircumference("RadiusData.js");
&lt;/script&gt;</pre>
<p>Here apply function will come in handy. <strong><em>getContextFunc</em></strong> returns anonymous function that will run our original method in given context.<br />
<a target="_blank" href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">See some documentation</a></p>
<br /><div><img src="http://kossovsky.net/wp-content/plugins/gd-star-rating/gfx.php?value=4.9" /></div><div>Rating: 4.9/<strong>5</strong> (8 votes cast)</div><br /><a target="_blank" href="http://www.gdstarrating.com/"><img src="http://kossovsky.net/wp-content/plugins/gd-star-rating/gfx/powered.png" border="0" width="80" height="15" /></a><br />
<p class="FacebookLikeButton"><fb:like href="http%3A%2F%2Fkossovsky.net%2Findex.php%2F2009%2F07%2Ffunction-context-and-apply-function%2F" layout="standard" show_faces="false" width="450" action="like" colorscheme="light"></fb:like></p>
]]></content:encoded>
			<wfw:commentRss>http://kossovsky.net/index.php/2009/07/function-context-and-apply-function/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

