ハタさんのブログ(復刻版)

javascriptのprototypeはなかなか理解してもらえないですねぇ。
ここ1年間でマジマジと実感しました。

特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて（ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。
そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。

ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘

prototype.jsのソースコードを眺める

Array.mapとかEnumerable, Hashは勉強になりますねー。
ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。

var hoge = someone();
for(var property in hoge){
    if(hoge.hasOwnProperty(property)){
    }
}

実際に作ってみる。

やっぱインタフェースみたいなものは欲しいよね。ってことで書いてみると理解が深まる気がする。

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);

プロトタイプ継承のcloneを眺めてた。

たかだかcloneなのに、非常に多くのことが詰まってる。これはjavascriptのprototypeを身に着けるなら必須だと思う。

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());

関数を非同期化するやつを眺める

あまり実用性が無いと思われがちですが、結構使えます。
prototype.jsのbindと同じように使うとなお便利かと。

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');

LDRのjsを読み耽る

いやーあれは色々勉強になりますねぇ。
読むだけで十分理解が深まった気分になれました。
「コードは小説より面白い」のはあながち。ですね。

ioLaunguageを使う。

言わずもがな、ioはprototypeな言語で、すごくわかりやすくprototypeを身に着けることがでる(ioはまだ、勉強中だけど)。
だって、Object cloneで、ほら継承がすぐ終わっちゃうのが凄い。

Object hello := method(return self type)
Hoge := Object clone
Foo := Hoge clone;

Hoge hello println
Foo hello println

全然prototypeと関係ないけど、IE限定でcallee.callerを使ってみる

なぜか、prototypeした(された?)オブジェクトからcallee.callerを使っている内に理解が深まったようなそうでもないような。

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);

私は如何にしてjavascriptのprototypeを身につけたか。
身に着ける。まではいってなくとも理解を深めると言った程度ですけど。