多階層かつ親参照も出来るprototypeなサムシングを書く旅

まあほとんど自分用メモなエントリで申し訳ないですが、ここ最近俺の中で最もホットかついまさらなprototypeな話。

例えば、以下のようなコードがあったとする。

var Foo = function(){
    this.prop = "test string"
}

Foo.prototype.foofoo = function(){
    console.log("this:",this)
}

まあ当然、このコンストラクタでオブジェクトを作ると中身はこうなる。

{prop: "test string", foofoo: function}

で、ここの下にprototypeでまたいろいろぶら下げるとなると、出来れば関数を階層構造にしたいと思うわけです。まあある意味予想していたものの、実はやり方があるんじゃないか？とJavaScriptのthisの親参照はどうやら出来ない事が師匠2人の答えからも分かったので、最終的にどうしたかをば。

var Foo = function(){
    this.prop = "test string"
    this.bar = new Bar(this);
}

Foo.prototype.foofoo = function(){
    console.log("this:",this)
}

var Bar = function(arg){
    this.parent = arg
}

Bar.prototype = {
    kirin:function(){ console.log(this.parent) },
    zo:function(){}
}


var foo = new Foo();

結局のところ、コンストラクタの下にぶら下がるprototypeを多階層化しつつ、そこにさらに親参照を付けようとすると、コンストラクタ内でその子要素のコンストラクタを呼び出し、そいつの中に親要素を保持させる（ここであれば、引数としてthisを渡し、子要素の中のparentの中に代入する）必要があるっぽい。

あまりこの方法で深い階層を作る気はないものの、出来れば同じ接頭辞の関数を乱立させるぐらいならオブジェクトの中にネストした方が見た目的にも理解しやすいなーという事があり、先にこの辺を試してみた次第。

prototypeにオブジェクトリテラルで渡す事の善し悪しはともかく、この書き方は個人的には今のところ書きやすい&保守しやすい。

沖縄の師匠にこの辺の話を深く考えさせすぎてしまった感はあるものの、もっとナイスな解決が出てきそうな予感なので、出てきたらそっちも試そう。