<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="http://blog.xole.net/rss/style.css" type="text/css"?>
<rdf:RDF xmlns="http://purl.org/rss/1.0/"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:content="http://purl.org/rss/1.0/modules/content/"
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xml:lang="ja">
<channel rdf:about="http://blog.xole.net/rss/1.0.php?id=560">
<title>ハタさんのブログ(復刻版)</title>
<link>http://blog.xole.net/index.php</link>
<dc:date>2007-04-17T00:29:34+09:00</dc:date>
<description>
ハタさんのブログ(復刻版) - RSS (RDF Site Summary).
</description>
<items>
<rdf:Seq>
<rdf:li rdf:resource="http://blog.xole.net/article.php?id=560" />
</rdf:Seq>
</items>
</channel>
<item>
<title>私は如何にしてJavascriptのprototypeを身につけたか。</title>
<link>http://blog.xole.net/article.php?id=560</link>
<dc:date>2007-04-17T00:29:34+09:00</dc:date>
<description>javascriptのprototypeはなかなか理解してもらえないですねぇ。
ここ1年間でマジマジと実感しました。

特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて（ホームページ時代からAjax本を読んだ人とか)が...</description>
<content:encoded>
<![CDATA[
<p>javascriptのprototypeはなかなか理解してもらえないですねぇ。<br />
ここ1年間でマジマジと実感しました。</p>

<p>特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて（ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。<br />
そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。</p>

<p>ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘</p>

<h3>prototype.jsのソースコードを眺める</h3>
<p>Array.mapとかEnumerable, Hashは勉強になりますねー。<br />
ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。<br />
<pre>
<code>var hoge = someone();
for(var property in hoge){
    if(hoge.hasOwnProperty(property)){
    }
}</code>
</pre>

<h3>実際に作ってみる。</h3>
<p>やっぱインタフェースみたいなものは欲しいよね。ってことで書いてみると理解が深まる気がする。</p>
<pre>
<code>var MyObject = function (){};
MyObject.prototype = {
    message: null,
    hello: function (){
        return this.message;
    }
};

var Hoge = function (message){
    this.message = message;
};
Hoge.prototype = new MyObject;

var hoge = new Hoge('hello');
alert(hoge.hello());
alert(hoge instanceof MyObject);</code>
</pre>


<h3>
<a href="http://d.hatena.ne.jp/amachang/20061019/1161201903">プロトタイプ継承のclone</a>を眺めてた。</h3>
<p>たかだかcloneなのに、非常に多くのことが詰まってる。これはjavascriptのprototypeを身に着けるなら必須だと思う。</p>
<pre>
<code>Object.prototype.clone = function (){
    var lamda = function (){};
    lamda.prototype = this;
    return new lamda;
};

var Hoge = {
    hello: function (){
        return 'i am hoge';
    }
};
alert(Hoge.hello());

var Foo = Hoge.clone();
alert(Foo.hello());

Foo.hello = function (){
    return 'i am foo';
};

var Bar = Foo.clone();
alert(Bar.hello());</code>
</pre>

<h3>
<a href="http://labs.cybozu.co.jp/blog/kazuho/archives/2006/11/js_async.php">関数を非同期化するやつ</a>を眺める</h3>
<p>あまり実用性が無いと思われがちですが、結構使えます。<br />
prototype.jsのbindと同じように使うとなお便利かと。</p>

<pre>
<code>Function.prototype.lazy = function (){
    var __method = this;
    var args = $A(arguments);
    var bind = args.shift();
    return setTimeout(function (){
        return __method.apply(bind, args);
    }, 0);
};

var Hoge = {
    hello: function (){
        return 'i am hello';
    }
};

var Foo = {
    hello: function (){
        return 'i am foo';
    }
};

var say = function (someone){
    alert(this.hello() + someone);
};

say.bind(Hoge)(' call 1');
say.lazy(Hoge, ' call 2');

say.lazy(Foo, ' call 1');
say.bind(Foo).lazy(Hoge, ' call 2');</code>
</pre>

<h3>LDRのjsを読み耽る</h3>
<p>いやーあれは色々勉強になりますねぇ。<br />
読むだけで十分理解が深まった気分になれました。<br />
「コードは小説より面白い」のはあながち。ですね。</p>

<h3>ioLaunguageを使う。</h3>
<p>言わずもがな、ioはprototypeな言語で、すごくわかりやすくprototypeを身に着けることがでる(ioはまだ、勉強中だけど)。<br />
だって、<code>Object clone</code>で、ほら継承がすぐ終わっちゃうのが凄い。</p>
<pre>
<code>Object hello := method(return self type)
Hoge := Object clone
Foo := Hoge clone;

Hoge hello println
Foo hello println</code>
</pre>

<h3>全然prototypeと関係ないけど、IE限定でcallee.callerを使ってみる</h3>
<p>なぜか、prototypeした(された?)オブジェクトからcallee.callerを使っている内に理解が深まったようなそうでもないような。</p>
<pre>
<code>var Hoge = function (message){
    var foo = arguments.callee.caller;
    var anony = foo.arguments.callee.caller;
    foo.message = message;
    anony.message = message;
};

var Foo = function (message){
    this.message = 'i am foo';
    new Hoge(message);
    alert(this.message);
};

var Bar = new function (){
    this.message = 'i am bar';
    new Foo('hello');
    alert(this.message);
};
alert(Foo.message);
alert(Bar.message);</code>
</pre>

<p>私は如何にしてjavascriptのprototypeを身につけたか。<br />
身に着ける。まではいってなくとも理解を深めると言った程度ですけど。</p>
]]>
</content:encoded>
</item>

</rdf:RDF>