<?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>日本野望の会 &#187; level☆☆☆☆</title>
	<atom:link href="http://yabooo.org/archives/category/level%e2%98%86%e2%98%86%e2%98%86%e2%98%86/feed" rel="self" type="application/rss+xml" />
	<link>http://yabooo.org</link>
	<description>いずれにせよITで世界征服をたくらむ悪の組織です。</description>
	<lastBuildDate>Mon, 28 Dec 2009 14:30:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Javascriptでカプセル化のコスト</title>
		<link>http://yabooo.org/archives/70</link>
		<comments>http://yabooo.org/archives/70#comments</comments>
		<pubDate>Thu, 07 Feb 2008 12:28:58 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[article]]></category>
		<category><![CDATA[level☆☆☆☆]]></category>

		<guid isPermaLink="false">http://www.yabooo.org/archives/70</guid>
		<description><![CDATA[
どうも、ひろきのだいちです。
Javascriptでカプセル化を実現する！の続編みたいなものです。
この記事を投稿したところ、chokodogさんから次のような指摘を受けました。
（コメントありがとうございます＞＜）
 [...]]]></description>
			<content:encoded><![CDATA[<link rel="StyleSheet" href='http://www.yabooo.org/wp-content/uploads/2008/01/prog.css' />
どうも、ひろきのだいちです。</p>
<p><a href="http://www.yabooo.org/archives/53">Javascriptでカプセル化を実現する！</a>の続編みたいなものです。</p>
<p>この記事を投稿したところ、chokodogさんから次のような指摘を受けました。<br />
（コメントありがとうございます＞＜）</p>
<blockquote><p>カプセル化した場合、コンストラクタ内でメソッドが定義されているので、new するたびfunctionが定義され、prototypeで定義するよりメモリを多くとられてしまうということはないのでしょうか？</p></blockquote>
<p>たしかにそのとおりです。</p>
<p>今回はカプセル化を先のような方法で行うとどのようなコストがかかるのかということ探ってみました。<br />
<span id="more-70"></span></p>
<h3>メモリを使うのでは？ってどういうこと？</h3>
<p>chokodogさんの指摘の意味を簡単に説明したいと思います。</p>
<p>まずは以下のjavascriptのプログラムを見てください。</p>
<div class="igBar"><span id="ljavascript-7"><a href="#" onclick="javascript:showCodeTxt('javascript-7'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-7">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//オブジェクトのプロトタイププロパティを設定</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Object.<span style="color: #006600;">prototype</span>.<span style="color: #006600;">objprop</span>=<span style="color: #CC0000;color:#800000;">100</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//Classオブジェクトの作成</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #003366; font-weight: bold;">Class</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//Classのインスタンスオブジェクトの作成</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> instance=<span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//Classプロトタイププロパティを設定</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #006600;">prototype</span>.<span style="color: #006600;">classprop</span>=<span style="color: #CC0000;color:#800000;">200</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//instanceの</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">instance.<span style="color: #006600;">insprop</span>=<span style="color: #CC0000;color:#800000;">300</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">objprop</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//--&gt;100</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">classprop</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//--&gt;200</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">insprop</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//--&gt;300</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"objprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//-&gt;false</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"classprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//-&gt;false&nbsp; &nbsp;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"insprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//-&gt;false</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">　ここでinstanceのプロトタイプチェーンをたどって</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">　みつかったプロパティをOwnプロパティとして設定</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">*/</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">instance.<span style="color: #006600;">objprop</span>=instance.<span style="color: #006600;">objprop</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">instance.<span style="color: #006600;">classprop</span>=instance.<span style="color: #006600;">classprop</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"objprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// --&gt;true</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"classprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// --&gt;true</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"insprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// --&gt;true </span></div>
</li>
</ol>
</div>
</div>
</div>
<p>
JavaScriptは通常のクラスベースのオブジェクト指向とことなりプロトタイプベースという別のプログラムパラダイムを採用しています。<br />
JavaScriptのオブジェクトはすべてハッシュのようなものになっていますが、これに少しばかり細工がしてあります。</p>
<p>それがプロトタイプチェーンというやつです。</p>
<p>オブジェクトは、自身のプロパティで見つからないようなハッシュ値を自分自身のコンストラクタのプロトタイプへと探しにいきます。</p>
<p>たとえば、上のプログラムの場合、<br />
objpropというプロパティを探しにいったときに</p>
<p>・自分自身のプロパティではない<br />
・自分のコンストラクタのプロトタイププロパティではない。<br />
・チェーンの終端であるオブジェクトのプロトタイププロパティで発見</p>
<p>というような順番で探っています。</p>
<p>しかし、次のようにするとプロトタイプ経由のプロパティを自分自身のプロパティとして利用することができます。</p>
<div class="igBar"><span id="ljavascript-8"><a href="#" onclick="javascript:showCodeTxt('javascript-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-8">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">　ここでinstanceのプロトタイプチェーンをたどって</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">　みつかったプロパティをOwnプロパティとして設定</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">*/</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">instance.<span style="color: #006600;">objprop</span>=instance.<span style="color: #006600;">objprop</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">instance.<span style="color: #006600;">classprop</span>=instance.<span style="color: #006600;">classprop</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"objprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// --&gt;true</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"classprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// --&gt;true</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">log<span style="color: #66cc66;">&#40;</span>instance.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"insprop"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// --&gt;true </span></div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>さて、プロトタイプチェーンの仕組みを踏まえて<br />
次のようなプログラムを見てください。</p>
<div class="igBar"><span id="ljavascript-9"><a href="#" onclick="javascript:showCodeTxt('javascript-9'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-9">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">&nbsp; &nbsp; プロトタイプとしてメソッドを実装</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">*/</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Object.<span style="color: #006600;">prototype</span>.<span style="color: #006600;">test</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>”hello”<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> t1=<span style="color: #66cc66;">&#123;</span>val:<span style="color: #CC0000;color:#800000;">2</span><span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> t2=<span style="color: #66cc66;">&#123;</span>val:<span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// ===で同一のリファレンスか確認</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">console.<span style="color: #006600;">log</span><span style="color: #66cc66;">&#40;</span>t1.<span style="color: #006600;">test</span>===t2.<span style="color: #006600;">test</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #009900; font-style: italic;">//true</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">&nbsp; &nbsp; instanceのown propertyとして実装</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">*/</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #003366; font-weight: bold;">Class</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">test</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>”hello!”<span style="color: #66cc66;">&#41;</span>;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> c1=<span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> c2=<span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//こちらは別のリファレンスになってしまう。</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">console.<span style="color: #006600;">log</span><span style="color: #66cc66;">&#40;</span>c1.<span style="color: #006600;">test</span>===c2.<span style="color: #006600;">test</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #009900; font-style: italic;">//false </span></div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>このように、オブジェクトのメソッドを定義する際に、<br />
オウンプロパティとして実装する場合では、</p>
<p>２つのインスタンスの定義した関数のそれぞれのさすリファレンスがことなることがわかります。</p>
<p>リファレンスとはC言語でいえばポインタ。<br />
つまりコンピュータのメモリ上の格納場所が異なるということです。</p>
<p>なので、</p>
<blockquote><p>カプセル化した場合、コンストラクタ内でメソッドが定義されているので、new するたびfunctionが定義され、prototypeで定義するよりメモリを多くとられてしまうということはないのでしょうか？</p></blockquote>
<p>冒頭のこのようなコメントを頂戴するわけです。<br />
このコメントに対して、僕はあろうことか鼻くそほじるように<br />
「トレードオフじゃないですか～。サーセンｗｗフヒヒ」(嘘おおげさ紛らわしい)と答えてしまいました。</p>
<p>やっぱりどのくらいコストがかかるのか確かめてみようと思い、実験を行いました。</p>
<h3>実験内容</h3>
<p>二つのjavascriptプログラムの実行時間とメモリ消費量を調べる。</p>
<div class="igBar"><span id="ljavascript-10"><a href="#" onclick="javascript:showCodeTxt('javascript-10'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-10">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">&nbsp; &nbsp; アンダーバー記法のクラス</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">*/</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//人間を作るときの関数（コンストラクタ）</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> Human=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066;">name</span>,year<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._year=year;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span>=<span style="color: #000066;">name</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._checkEto<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//人間のDNA（設計図）を決める</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Human.<span style="color: #006600;">prototype</span>=<span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066;">name</span>:<span style="color: #3366CC;">""</span>,_year:<span style="color: #CC0000;color:#800000;">1983</span>,_eto:<span style="color: #3366CC;">"亥"</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//干支を生まれ年から計算する</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; _checkEto:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._eto=<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">"子"</span>,<span style="color: #3366CC;">"丑"</span>,<span style="color: #3366CC;">"寅"</span>,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">"卯"</span>,<span style="color: #3366CC;">"辰"</span>,<span style="color: #3366CC;">"巳"</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">"午"</span>,<span style="color: #3366CC;">"未"</span>,<span style="color: #3366CC;">"申"</span>,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">"酉"</span>,<span style="color: #3366CC;">"戌"</span>,<span style="color: #3366CC;">"亥"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>._year-<span style="color: #CC0000;color:#800000;">4</span><span style="color: #66cc66;">&#41;</span>%<span style="color: #CC0000;color:#800000;">12</span><span style="color: #66cc66;">&#93;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//年齢を決める。</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; setYear:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>year<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._year=year;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._checkEto<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; getYear:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>._year;<span style="color: #66cc66;">&#125;</span>,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; getEto:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>._eto;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<div class="igBar"><span id="ljavascript-11"><a href="#" onclick="javascript:showCodeTxt('javascript-11'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-11">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">&nbsp; &nbsp; クロージャによるカプセル化クラス</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">*/</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> Human=<span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　<span style="color: #003366; font-weight: bold;">var</span> constructor=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066;">name</span>,year<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #003366; font-weight: bold;">var</span> inner=<span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　<span style="color: #000066;">name</span>:<span style="color: #000066;">name</span>,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　eto:<span style="color: #3366CC;">""</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　year:year,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　<span style="color: #009900; font-style: italic;">/*</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">　　　　　　　　private</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">　　　　　　*/</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　checkEto:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　　　inner.<span style="color: #006600;">eto</span>=<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">"子"</span>,<span style="color: #3366CC;">"丑"</span>,<span style="color: #3366CC;">"寅"</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　　　　　<span style="color: #3366CC;">"卯"</span>,<span style="color: #3366CC;">"辰"</span>,<span style="color: #3366CC;">"巳"</span>,</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　　　　　<span style="color: #3366CC;">"午"</span>,<span style="color: #3366CC;">"未"</span>,<span style="color: #3366CC;">"申"</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　　　　　<span style="color: #3366CC;">"酉"</span>,<span style="color: #3366CC;">"戌"</span>,<span style="color: #3366CC;">"亥"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#40;</span>inner.<span style="color: #006600;">year</span>-<span style="color: #CC0000;color:#800000;">4</span><span style="color: #66cc66;">&#41;</span>%<span style="color: #CC0000;color:#800000;">12</span><span style="color: #66cc66;">&#93;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　inner.<span style="color: #006600;">checkEto</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setName</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066;">name</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　inner.<span style="color: #000066;">name</span>=<span style="color: #000066;">name</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setYear</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>year<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　inner.<span style="color: #006600;">year</span>=year;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　inner.<span style="color: #006600;">checkEto</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">getName</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　<span style="color: #000066; font-weight: bold;">return</span> inner.<span style="color: #000066;">name</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">getYear</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　<span style="color: #000066; font-weight: bold;">return</span> inner.<span style="color: #006600;">year</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">getEto</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　　　<span style="color: #000066; font-weight: bold;">return</span> inner.<span style="color: #006600;">eto</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　　　<span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">　　<span style="color: #000066; font-weight: bold;">return</span> constructor;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>この２つのプログラムの生成にかかるコストをこのような<br />
プログラムをそれぞれに行い調査します。</p>
<div class="igBar"><span id="ljavascript-12"><a href="#" onclick="javascript:showCodeTxt('javascript-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-12">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i=<span style="color: #CC0000;color:#800000;">0</span>;i&lt;<span style="color: #CC0000;color:#800000;">10000</span>;i++<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> x=<span style="color: #003366; font-weight: bold;">new</span> Human<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"DAICHI"</span>+i,i<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<h3>実行時間</h3>
<pre class="source">
# time js none.js
real    0m0.006s

# time js cap.js
real    0m0.007s

# time js underbar.js
real    0m0.007s

# time js c_cap_10000.js　
real    0m1.741s

# time js c_underbar_10000.js
real    0m0.867s
</pre>
<p>jsインタプリタにはspidermonkeyを使います。</p>
<p>none.jsはただjsインタプリタを起動するのにかかった時間をはかるために何も書いていないjsファイルをtouchして作っただけです。</p>
<p>読み込みにはそれぞれ0.001secしかかかっていません。<br />
実行時間は10000個のインスタンス生成におよそ0.874秒のコストがかかっています。</p>
<p>ということは、カプセルかによって</p>
<p><big><big><big>87.4マイクロ秒</big></big></big></p>
<p>のコストが１つのインスタンス生成あたりにかかっているようです。</p>
<h3>メモリ消費量について</h3>
<p>次はメモリの消費量です。<br />
これは昨日作ったfleafeedを使ってみます。<br />
<a href="http://www.yabooo.org/archives/65">C言語でメモリ使用量をカウントする！</a></p>
<p>timeコマンドのオプション使えやって思った人は正しいんですが、<br />
せっかくなので使ってみたくなっちゃったんだもん＞＜</p>
<pre class="source">
#fleafeed js none.js
< fleafeed >
-----------fleafeed results------------

--USING HEAP    :   48574 bytes

#fleafeed js cap.js
-----------fleafeed results------------

--USING HEAP    :   59641 bytes

# fleafeed js underbar.js
-----------fleafeed results------------

--USING HEAP    :   56019 bytes

# fleafeed js c_cap_10000.js
-----------fleafeed results------------

--USING HEAP    :12925508 bytes

# fleafeed js c_underbar_10000.js
-----------fleafeed results------------

--USING HEAP    : 1731685 bytes
</pre>
<p>とこんな感じ。</p>
<p>jsの実装はほとんどHEAPしか使わないので、HEAP領域のみをピックアップしてみました。</p>
<p>まず、読み込みにかかるコストの比較ですが</p>
<pre class="source">
アンダーライン記法：11067 bytes
クロージャ記法	    ：7745	bytes
</pre>
<p>あれ？なんかしらんけどクロージャ記法のほうが読み込みは少ないっぽいです。不思議。</p>
<p>次に生成１つあたりのメモリコストの違いですが<br />
これはでかいですね。</p>
<p>これを計算してみると１つあたりのメモリコストは</p>
<p><big><big><big>1,110 bytes</big></big></big></p>
<p>となっているようです。およそ1kのメモリが余分に使われてしまうわけです。<br />
これは確かにコスト高な感じはします。</p>
<p>富豪プログラミングをしたいひとにはオススメということで<br />
どうでしょうか（泣）</p>
]]></content:encoded>
			<wfw:commentRss>http://yabooo.org/archives/70/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascriptでカプセル化を実現する！</title>
		<link>http://yabooo.org/archives/53</link>
		<comments>http://yabooo.org/archives/53#comments</comments>
		<pubDate>Mon, 28 Jan 2008 19:16:53 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[article]]></category>
		<category><![CDATA[level☆☆☆☆]]></category>

		<guid isPermaLink="false">http://www.yabooo.org/archives/53</guid>
		<description><![CDATA[

どうも、修士論文を出し終わって安心しきっているダメダメな院生のひろきのだいちです。
今回はJavascriptをつかって良いチラリズムと悪いチラリズムについてちょこっと話したいと思います。いったいなんのことやらさっぱ [...]]]></description>
			<content:encoded><![CDATA[<link rel="StyleSheet" href='http://www.yabooo.org/wp-content/uploads/2008/01/prog.css'  type="text/css" />
<script src="http://www.yabooo.org/wp-content/uploads/2008/01/invoke.js"></script></p>
<p>どうも、修士論文を出し終わって安心しきっているダメダメな院生のひろきのだいちです。</p>
<p>今回はJavascriptをつかって良いチラリズムと悪いチラリズムについてちょこっと話したいと思います。いったいなんのことやらさっぱりではあるんですが 、オブジェクト指向でいうところのカプセル化をプロトタイプベースであるところのJavascriptによって実現する方法やらなにやらを考察していきたいと思います。</p>
<h2>目次：</h2>
<ol>
<li><a href="http://www.yabooo.org/archives/53#01">チラリズム</a></li>
<li><a href="http://www.yabooo.org/archives/53#02">カプセル化とは</a></li>
<li><a href="http://www.yabooo.org/archives/53#03">人間クラスを作る</a></li>
<li><a href="http://www.yabooo.org/archives/53#04">スケスケクラスの問題点</a></li>
<li><a href="http://www.yabooo.org/archives/53#05">アンダーバー記法によるカプセル化</a></li>
<li><a href="http://www.yabooo.org/archives/53#06">アンダーバー記法の問題点</a></li>
<li><a href="http://www.yabooo.org/archives/53#07">クロージャとレキシカル変数</a></li>
<li><a href="http://www.yabooo.org/archives/53#08">クロージャで作る無名オブジェクト</a></li>
<li><a href="http://www.yabooo.org/archives/53#09">無名オブジェクトを用いたカプセル化</a></li>
<li><a href="http://www.yabooo.org/archives/53#10">カプセル化ライブラリ</a></li>
</ol>
<p><span id="more-53"></span></p>
<h3><a title="01" name="01"></a>チラリズム</h3>
<p>みなさんはチラリズムってスキですか？</p>
<p>少なくとも僕は大好きなんで、プログラムのことを話す前にチラリズムのことを話したいと思います。<br />
想像してみてください。たとえば、とってもかわいい女の子が床に落ちたものを拾おうとして、<br />
かがんだときに天使の羽的なブーラジャーがチラッとお目見えしたときのことを。<br />
ステキやん。なんかステキやん。</p>
<p>でも、どうですか？</p>
<p>「ほら、ブラジャーやで～。見ぃ～へんかー」</p>
<p>とばかりに大胸筋矯正サポータを見せつけられることになったら。</p>
<p>イヤですよね。やめてほしいですよね。そうでもないっていうひとはとりあえず置いてきぼりにします。</p>
<p>いや、別にかまわないんだけども。</p>
<p>世の中、隠れているところに美徳があるんです。なにもかもあけっぴろげじゃやってられません。<br />
それはプログラムの世界でもいっしょです。</p>
<h3><a title="02" name="02"></a>カプセル化とは</h3>
<p>カプセル化というのは・・・・IT用語辞典を引いてみます＞＜</p>
<blockquote><p><a href="http://e-words.jp/w/E382AAE38396E382B8E382A7E382AFE38388E68C87E59091E38397E383ADE382B0E383A9E3839FE383B3E382B0.html">オブジェクト指向プログラミング</a>が持つ特徴の一つ。データとそれを操作する手続きを一体化して「<a href="http://e-words.jp/w/E382AAE38396E382B8E382A7E382AFE38388.html">オブジェクト</a>」 として定義し、オブジェクト内の細かい仕様や構造を外部から隠蔽すること。外部からは公開された手続きを利用することでしかデータを操作できないようにす ることで、個々のオブジェクトの独立性が高まる。カプセル化を進めることによりオブジェクト内部の仕様変更が外部に影響しなくなり、<a href="http://e-words.jp/w/E382BDE38395E38388E382A6E382A7E382A2.html">ソフトウェア</a>の保守性や開発効率が高まり、プログラムの部分的な再利用が容易になる。</p></blockquote>
<p>ほうほう。なるほど。なんのこっちゃと思わないでください。</p>
<p>要するに「中身の計算とかの細かいところを外部から隠して公開した方法だけ使ってください。というかそれ以外見ないで///」<br />
ということです。</p>
<h3><a title="03" name="03"></a>干支を自動的に調整するクラスを作る</h3>
<p>それはさておき、プログラムの話です。とりあえJavascriptという言語でのオブジェクトの設計図であるところの クラスと言うやつをつくりましょう。ここでは、生年と干支をもったクラスをつくってみます。<br />
</p>
<div class="pg">
<pre class="source">
//人間を作るときの関数（コンストラクタ）
var Human=function(name,year){
	this.year=year;
	this.name=name;
	this.checkEto();
};
//人間のDNA（設計図）を決める
Human.prototype={
	name:"",year:1983,eto:"亥",
	//干支を生まれ年から計算する
	checkEto:function(){
		this.eto=["子","丑","寅",
			"卯","辰","巳",
			"午","未","申",
			"酉","戌","亥"][(this.year-4)%12];
	},
	//年齢を決める。
	setYear:function(year){
		this.year=year;
		this.checkEto();
	}
};
var ore=new Human("hiroki",1983);
log(ore.name);
log(ore.eto);
ore.setYear(1999);log(ore.eto);
</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>こんな感じです。<br />
実行をクリックするとプログラムが実行されるので試してみて下さい。</p>
<p>クラスというのは人間で言うとDNAみたいなものです。<br />
ここから本当の人間をつくるための処理のことをコンストラクタといいます。</p>
<p>このクラスは最初に名前と生年を入れたときに、自動的に干支を計算してくれるものです。<br />
さらに、生年に間違いがあった場合にはsetYearというメソッドを使うことで、<br />
その年にあった干支にメンバー変数を書き換えてくれます。</p>
<h3><a name="04">スケスケクラスの問題点</a></h3>
<p>先ほどのクラスの問題点とはなんでしょうか？<br />
それは、Javascriptのオブジェクトはすべてハッシュになっていて、アクセス権限をつけられないということです。<br />
（注：最新のバージョンのJavascriptが動作する環境ならば、アクセサを設定することができるがすべてのブラウザで使用できるわけではない。）</p>
<p>アクセス権限をつけられないとはどういうことでしょうか？</p>
<p>このクラスを作ったひととは別の人がこのクラスを使用したときに<br />
内部の構造まで簡単に書き換えられてしまい、思ったような動作をしない場合があるということです。</p>
<p>例を見てみましょう。</p>
<div class="pg">
<pre class="source" style="display:none;">
//人間を作るときの関数（コンストラクタ）
var Human=function(name,year){
	this.year=year;
	this.name=name;
	this.checkEto();
};
//人間のDNA（設計図）を決める
Human.prototype={
	name:"",year:1983,eto:"亥",
	//干支を生まれ年から計算する
	checkEto:function(){
		this.eto=["子","丑","寅",
			"卯","辰","巳",
			"午","未","申",
			"酉","戌","亥"][(this.year-4)%12];
	},
	//年齢を決める。
	setYear:function(year){
		this.year=year;
		this.checkEto();
	}
};
	</pre>
<pre class="source">
var ore=new Human("hiroki",1999);
log(ore.eto);
ore.year=1983;
log(ore.eto);
	</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>yearメンバーを書き換えたにもかかわらず、干支が反映されていません。<br />
これはsetYearメソッドを使わずにyearにアクセスしてしまったためにおこりました。</p>
<p>このクラス設計では、「yearを使わずにsetYearを使ってください。」ということが<br />
明言されてなかったためにこんなこともおきてしまいます。</p>
<p>それでは、この問題をどうやって解決したらよいのでしょうか。</p>
<h3><a name="05">アンダーバー記法によるカプセル化</a></h3>
<p>昔から、プログラマたちはこの種の問題の解決策を考えるときに言語仕様などを変えることができないような<br />
場合では「コーディング規約」を設定することで回避してきました。</p>
<p>その一例として、privateな変数は「_hogeFuga」のようにアンダーバーをプリフィックスにすることで、<br />
簡単にアクセスできないようにしたり、名前が重複しないようにしたりという工夫がされてきました。</p>
<p>その場合のクラス例を見てみましょう。</p>
<div class="pg">
<pre class="source" >
//人間を作るときの関数（コンストラクタ）
var Human=function(name,year){
	this._year=year;
	this.name=name;
	this._checkEto();
};
//人間のDNA（設計図）を決める
Human.prototype={
	name:"",_year:1983,_eto:"亥",
	//干支を生まれ年から計算する
	_checkEto:function(){
		this._eto=["子","丑","寅",
			"卯","辰","巳",
			"午","未","申",
			"酉","戌","亥"][(this._year-4)%12];
	},
	//年齢を決める。
	setYear:function(year){
		this._year=year;
		this._checkEto();
	},
	getYear:function(){return this._year;},
	getEto:function(){return this._eto;}
};
//--TEST CASES--//
var ore=new Human("hiroki",1999);
log(ore.getEto());
ore.setYear(1983);
log(ore.getEto());
	</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>どうでしょうか？直接読み書きができるメンバー変数はnameのみで、<br />
あとはsetやgetのついたメソッドを経由してアクセスしてくださいというお願いを<br />
コーディングのなかのアンダーバーを使って書き込んでおきました。</p>
<p>これで、読んだ人はわかってくれるはず。と・・・</p>
<h3><a name="06">アンダーバー記法の問題点</a></h3>
<p>ところがこの表記にも問題があります。<br />
それは、<br />
第一に中身にアクセスしようと思えばしてしまうということ。<br />
第二に間違ったkeyでハッシュにアクセスしたときにエラーが出ずに<br />
間違ったままのkeyにデータを代入してしまう可能性があるということ。<br />
です。</p>
<p>例を見てみましょう。</p>
<div class="pg">
<pre class="source" style="display:none;">
//人間を作るときの関数（コンストラクタ）
var Human=function(name,year){
	this._year=year;
	this.name=name;
	this._checkEto();
};
//人間のDNA（設計図）を決める
Human.prototype={
	name:"",_year:1983,_eto:"亥",
	//干支を生まれ年から計算する
	_checkEto:function(){
		this._eto=["子","丑","寅",
			"卯","辰","巳",
			"午","未","申",
			"酉","戌","亥"][(this._year-4)%12];
	},
	//年齢を決める。
	setYear:function(year){
		this._year=year;
		this._checkEto();
	},
	getYear:function(){return this._year;},
	getEto:function(){return this._eto;}
};
	</pre>
<pre class="source">
//--TEST CASES--//
var ore=new Human("hiroki",1983);
log("亥になってほしい："+ore.getEto());
ore.year=2008;
log("子になってほしい："+ore.getEto());
	</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>上記の例ではsetYearでアクセスしなければならないところに<br />
オブジェクトハッシュのyearに直接アクセスしてしまい、<br />
本来の_yearを変更できないまま、間違ったyearというkeyに数字を代入してしまっています。</p>
<p>なので、当然干支も反映されずにそのままです。</p>
<h3><a name="07">クロージャ=そのときの変数を持ち続ける無名関数</a></h3>
<p>そこでちょっと別のアプローチをして、この問題点を解決してみましょう。<br />
Javascriptには、クロージャというものを作る機能があります。</p>
<p>クロージャは簡単に説明すると、<br />
名前の無い関数をオブジェクトのようにして生成し、その関数を定義したタイミングで使える変数を<br />
使えるままにして一時保存して、関数実行時にもアクセス可能にするという機能の代物です。</p>
<p>以下に例を示します。</p>
<div class="pg">
<pre class="source" >
function Test(argX){
	var x=argX;
	//このときはxにアクセスできる環境
	//それを引き継いだ無名関数を生成できる。
	return function(){x=x*x;return x;};

}

var func=Test(3);
log(func());
log(func());
log(func());
	</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>例では、関数のブロック内でしか利用できないxという変数をクロージャに記録しています。<br />
このクロージャのなかからならば、xを利用することができるので、その値を関数が呼ばれるたびに<br />
二乗しています。</p>
<h3><a name="08">クロージャで作る名無しのオブジェクト</a></h3>
<p>このクロージャにはりついた変数をつかって、名前がなくなってしまったオブジェクトをつくり<br />
そこにアクセスする方法を定義してみましょう。</p>
<div class="pg">
<pre class="source" >
//名無しのオブジェクトをつくる関数
function createObj(dat){
	var _anon=dat;
	//このときはまだ_objにアクセスできる
	return {
		get:function(){
			//_anonの中身をみるクロージャ
			return _anon;
		},
		set:function(dat){
			//_anonの中身を設定するクロージャ
			_anon=dat;
		}
	};
}
//ここでは_anonにアクセスすることができない。
//なのでクロージャ経由で、もう消えてしまったオブジェクトにアクセスする。
//--TEST CASES--//
var obj=createObj("hello!");
log(obj.get());
obj.set("こんにちは！");
log(obj.get());

//無理やり_anonにアクセスしようとしてもエラーが。
try{log(_anon);}catch(e){err(e)}
</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>もし、ここでsetをするときに数字以外受け付けないようにすれば数字であることが保障される<br />
変数を作ることができます。</p>
<h3><a name="09">名無しのオブジェクトを用いたカプセル化</a></h3>
<p>それでは、先ほどもちいた名無しのオブジェクトを用いて、<br />
アクセス制御を行ったクラスを見てみましょう。</p>
<div class="pg">
<pre class="source" >

var Human=(function(){
　　var constructor=function(name,year){
　　　　var inner={
　　　　　　name:name,
　　　　　　eto:"",
　　　　　　year:year,
　　　　　　/*
　　　　　　　　private
　　　　　　*/
　　　　　　checkEto:function(){
　　　　　　　　inner.eto=["子","丑","寅",
　　　　　　　　　　"卯","辰","巳",
　　　　　　　　　　"午","未","申",
　　　　　　　　　　"酉","戌","亥"][(inner.year-4)%12];
　　　　　　}
　　　　};
　　　　inner.checkEto();

　　　　this.setName=function(name){
　　　　　　inner.name=name;
　　　　
　　　　};
　　　　this.setYear=function(year){
　　　　　　inner.year=year;
　　　　　　inner.checkEto();
　　　　};
　　　　this.getName=function(){
　　　　　　return inner.name;
　　　　};
　　　　this.getYear=function(){
　　　　　　return inner.year;
　　　　};
　　　　this.getEto=function(){
　　　　　　return inner.eto;
　　　　};
　　}
　　
　　return constructor;
})();
//--TEST CASES--//
var hachi=new Human("86世代",1986)
var ore=new Human("hiroki_daichi",1983);
log(hachi.getName()+":"+hachi.getEto());
log(ore.getName()+":"+ore.getEto());
//存在しないメソッドにアクセスしてみる。
try{ore.setEto("戌")}catch(e){err(e)}
	</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>コンストラクタから生成されるメンバが記録されているのはinnerという名前の<br />
変数です。これはこの関数から抜けたあとにはアクセスすることができなくなります。</p>
<p>なのでcheckEtoのようなプライベート関数はinnerの中に書いておけば外から<br />
アクセスされる心配がありません。</p>
<p>一方、アクセサやパブリック関数については、prototypeにクロージャとして代入しておけば、<br />
innerにアクセスできる状態のままで外からでも利用可能な関数になります。</p>
<p>この記法を用いれば、<br />
外部からすべてのメンバ変数へのアクセスはメソッド経由になるので、<br />
存在しないメソッドにアクセスした際にかならずエラーが発生し、デバッグがしやすくなります。</p>
<h3><a name="10">カプセル化ライブラリ</a></h3>
<p>おまけというか本ちゃんと言うか、<br />
先ほどの手法を用いて、カプセル化を自動で行い、通常のクラスと同じように利用できるライブラリを<br />
書いてみました。</p>
<p>詳しく説明することはしませんが、インスタンス生成時にinnerをメソッドにバインドすることで<br />
名無しのオブジェクトをthisとして利用しています。</p>
<div class="pg">
<pre class="source">

Function.prototype.bind=function(obj){
　　var _method=this;
　　return function(){
　　　　return _method.apply(obj,arguments);
　　};

};
Function.prototype.bindAsAccessor=function(attr,obj){
　　var _method=this;
　　return function(){
　　　　var length=arguments.length;
　　　　var tmp=[attr];
　　　　for(var i=0;length-i>0;i++){
　　　　　　tmp.push(arguments[i]);
　　　　}
　　　　return _method.apply(obj,tmp);
　　　　
　　};
};

var Class={
　　create:function(obj){
　　　　var Klass=function(){
　　　　　　var inner={};
　　　　　　
　　　　　　for(var prp in obj){
　　　　　　
　　　　　　　　var elem=obj[prp];
　　　　　　　　if(prp.match(/(attr|private|public)_(\w+)/gim)){
　　　　　　　　　　var type=RegExp.$1;
　　　　　　　　　　var prop=RegExp.$2;
　　　　　　　　　　if(type=="attr"){
　　　　　　　　　　　　inner[prop]=elem["preset"];
　　　　　　　　　　　　if(elem.set){
　　　　　　　　　　　　　　if(typeof elem.set=="function"){
　　　　　　　　　　　　　　　　this["set_"+prop]=elem.set.bind(inner);
　　　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　　　this["set_"+prop]=(function(attr,dat){
　　　　　　　　　　　　　　　　　　this[attr]=dat;
　　　　　　　　　　　　　　　　}).bindAsAccessor(""+prop,inner);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　　　if(elem.get){
　　　　　　　　　　　　　　if(typeof elem.get=="function"){
　　　　　　　　　　　　　　　　this["get_"+prop]=elem.get.bind(inner);
　　　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　　　this["get_"+prop]=(function(attr){
　　　　　　　　　　　　　　　　　　return this[attr];
　　　　　　　　　　　　　　　　}).bindAsAccessor(""+prop,inner);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　　　if(type=="private"){
　　　　　　　　　　　　inner[prop]=elem.bind(inner);
　　　　　　　　　　}
　　　　　　　　　　if(type=="public"){
　　　　　　　　　　　　this[prop]=elem.bind(inner);
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　　}else{
　　　　　　　　　　//識別詞の無いエントリ
　　　　　　　　　　this[prp]=obj[prp];
　　　　　　　　}
　　　　　　}
　　　　　　
　　　　　　for(var prp in this){
　　　　　　　　inner[prp]=this[prp];
　　　　　　}
　　　　　　Klass.__debug=obj;
　　　　　　inner.initialize.apply(inner,arguments);
　　　　　　
　　　　}
　　　　return Klass;
　　}
};

var Human=Class.create({
　　attr_year:{set:function(dat){
　　　　this.year=dat;
　　　　this.checkEto();
　　},get:true,preset:0},
　　attr_eto:{set:false,get:true,preset:"_"},
　　attr_name:{set:true,get:true,preset:"_"},
　　private_checkEto:function(){
　　　　this.eto=["子","丑","寅",
　　　　　　"卯","辰","巳",
　　　　　　"午","未","申",
　　　　　　"酉","戌","亥"][(this.year-4)%12];
　　
　　},
　　private_initialize:function(name,year){
　　　　this.name=name;
　　　　this.year=year;
　　　　this.checkEto();
　　},
　　public_dump:function(){
　　　　log("---:dump object:---");
　　　　for(var prp in this){
　　　　　　if(typeof this[prp]!="function"){
　　　　　　　　log(prp+":"+this[prp]);
　　　　　　}
　　　　}
　　}
});
//--TEST CASES--//

var x=new Human("ひろきのだいち",1983);
var y=new Human("ひろきのだいち",1983);
x.dump();
y.dump();
x.set_year(1986);
x.set_name("86世代");
y.set_year(2008);
y.set_name("未来の主役");
x.dump();
y.dump();
</pre>
<div class="console"></div>
<input type="button" value="実行" class="button" onclick="invoke(this)"/>
</div>
<p>それでは、君もいまからLet'sカプセル化ライフ！</p>
]]></content:encoded>
			<wfw:commentRss>http://yabooo.org/archives/53/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
