<?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>timwhitlock.info &#187; closures</title>
	<atom:link href="http://timwhitlock.info/blog/tag/closures/feed/" rel="self" type="application/rss+xml" />
	<link>http://timwhitlock.info</link>
	<description>Tim Whitlock&#039;s personal site and blog</description>
	<lastBuildDate>Thu, 15 Dec 2011 13:51:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>JavaScript Method Closures</title>
		<link>http://timwhitlock.info/blog/2008/11/24/javascript-closures/</link>
		<comments>http://timwhitlock.info/blog/2008/11/24/javascript-closures/#comments</comments>
		<pubDate>Mon, 24 Nov 2008 19:29:42 +0000</pubDate>
		<dc:creator>tim</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[AS2]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[closures]]></category>
		<category><![CDATA[Delegate]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[OOP]]></category>

		<guid isPermaLink="false">http://web.2point1.com/2008/11/24/javascript-closures/</guid>
		<description><![CDATA[I was further convinced this week that the world needs JASPA when my Flash developer colleague asked me about closures in JavaScript. He&#8217;s been knee-deep in AS3 for almost a year, so JavaScript must seem rather weak now. Unlike JavaScript and AS2, AS3 supports method closures implicitly; so I made sure they were built into [...]]]></description>
			<content:encoded><![CDATA[<p>I was further convinced this week that the world needs <a href="http://web.2point1.com/tag/jaspa/">JASPA</a> when my Flash developer colleague asked me about closures in JavaScript. He&#8217;s been knee-deep in AS3 for almost a year, so JavaScript must seem rather weak now.</p>
<p>Unlike JavaScript and AS2, AS3 supports method closures implicitly; so I made sure they were built into the <a href="http://web.2point1.com/2008/10/29/jas-vs-actionscript/">JAS</a> language. Such a thing is not native to JavaScript so the JASPA compiler automatically generates a call to helper function <code>jaspa.closure</code> whenever an object&#8217;s method is referenced.</p>
<p>If you&#8217;ve ever used <code>Delegate.create</code> in AS2, then you&#8217;ve encountered this issue. If you don&#8217;t see the problem, consider this example in JavaScript:<br />
<span id="more-75"></span></p>
<ol class="javascript">
<li class="odd"><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Cat</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">function</span><span class="J_PUNCTUATOR">(</span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">       </span><span class="J_KEYWORD">this</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">voice</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_STRING_LITERAL">&#8216;Miaow&#8217;</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_PUNCTUATOR">}</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_IDENTIFIER">Cat</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">prototype</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">speak</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">function</span><span class="J_PUNCTUATOR">(</span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">     alert</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">this</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">voice</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_PUNCTUATOR">}</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_LINE_TERMINATOR">  </span></li>
<li class="even"><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Sammy</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">new</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Cat</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_IDENTIFIER">Sammy</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">speak</span><span class="J_PUNCTUATOR">(</span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_WHITESPACE"> </span><span class="J_COMMENT">// alerts &#8220;Miaow&#8221;</span></li>
<li class="even"><span class="J_LINE_TERMINATOR">  </span></li>
<li class="odd"><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Callback</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Sammy</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">speak</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_IDENTIFIER">Callback</span><span class="J_PUNCTUATOR">(</span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_WHITESPACE"> </span><span class="J_COMMENT">// alerts undefined</span></li>
</ol>
<p>As soon as we&#8217;ve created a reference to the function member, we&#8217;ve severed it from its owner, so when we call it, it&#8217;s not being called on the object. In JavaScript and AS2 we need to use a method like <code>Delegate.create</code> to explicitly create a closure. Here&#8217;s an example:</p>
<ol class="javascript">
<li class="odd"><span class="J_KEYWORD">function</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">makeClosure</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">obj</span><span class="J_PUNCTUATOR">,</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">func</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">       </span><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">closure</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">function</span><span class="J_PUNCTUATOR">(</span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">              </span><span class="J_KEYWORD">return</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">func</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">apply</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">obj</span><span class="J_PUNCTUATOR">,</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">arguments</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">       </span><span class="J_PUNCTUATOR">}</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">       </span><span class="J_IDENTIFIER">closure</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">apply</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">function</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">obj</span><span class="J_PUNCTUATOR">,</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">args</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">              </span><span class="J_KEYWORD">return</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">func</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">apply</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">obj</span><span class="J_PUNCTUATOR">,</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">args</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">       </span><span class="J_PUNCTUATOR">}</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">       </span><span class="J_IDENTIFIER">closure</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">call</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">function</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">obj</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">                 </span><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">args</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">[</span><span class="J_PUNCTUATOR">]</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">                  </span><span class="J_KEYWORD">for</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">i</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_NUMERIC_LITERAL">1</span><span class="J_PUNCTUATOR">;</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">i</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">&lt;</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">arguments</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">length</span><span class="J_PUNCTUATOR">;</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">i</span><span class="J_PUNCTUATOR">++</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">{</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">                         </span><span class="J_IDENTIFIER">args</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">push</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">arguments</span><span class="J_PUNCTUATOR">[</span><span class="J_IDENTIFIER">i</span><span class="J_PUNCTUATOR">]</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">                  </span><span class="J_PUNCTUATOR">}</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">                 </span><span class="J_KEYWORD">return</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">func</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">apply</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">obj</span><span class="J_PUNCTUATOR">,</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">args</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_WHITESPACE">       </span><span class="J_PUNCTUATOR">}</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="odd"><span class="J_WHITESPACE">       </span><span class="J_KEYWORD">return</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">closure</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_PUNCTUATOR">}</span></li>
</ol>
<p>It&#8217;s basically a wrapper function which seals in the original arguments. Additionally <code>apply</code> and <code>call</code> must be overridden or calling them directly will spoil the party. Try it with the Cat example and you&#8217;ll see the desired result.</p>
<ol class="javascript">
<li class="odd"><span class="J_KEYWORD">var</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Callback</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">=</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">makeClosure</span><span class="J_PUNCTUATOR">(</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Sammy</span><span class="J_PUNCTUATOR">,</span><span class="J_WHITESPACE"> </span><span class="J_IDENTIFIER">Sammy</span><span class="J_PUNCTUATOR">.</span><span class="J_IDENTIFIER">speak</span><span class="J_WHITESPACE"> </span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_LINE_TERMINATOR"> </span></li>
<li class="even"><span class="J_IDENTIFIER">Callback</span><span class="J_PUNCTUATOR">(</span><span class="J_PUNCTUATOR">)</span><span class="J_PUNCTUATOR">;</span><span class="J_WHITESPACE"> </span><span class="J_COMMENT">// alerts &#8220;Miaow&#8221;</span></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://timwhitlock.info/blog/2008/11/24/javascript-closures/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

