JavaScriptの再利用とapply

先日職場でJavaScriptの話をしていて、

 

「ほら、JSでOOするのあるでしょ、inheritanceとか。ああいうのが載ってる本ってある？」

 

とか言われました。

私がこういうの大嫌いなのは一部では有名な話ですが、職場では寛容に、ネット上では偏屈に、がポリシーなので素直に流しました。

そしてblogでは偏屈な話題になります。

 

inheritanceの前に一番大切なのはthisとapplyだと思います。

軟弱にprototypeにつめて継承、なんて事に進む前に、もうちょっと細かい薀蓄の話とか。

 

まずthisについて。これが肝その1です。

function aConstructor()

{

    this.aVal = 1;

    this.aFun = function () { alert(this.aVal); } 

}

 

var a = new aConstructor();

a.aFun();

 

というコードがあったとしましょう。

この時、1と表示されます。

 

また、

var afun = a.aFun;

afun();

とすると結果が変わります(undefinedになります)

なぜでしょうか？

 

    this.aFun = function () { alert(this.aVal); } 

 

それはこのthisの値が何かによります。

a.aFun()と呼ぶとthisはaになります。

でも

var afun = a.aFun;

afun();

とするとthisはグローバルをあらわすthisとなります。

つまりthisは、ある関数を呼ぶ時に、その「.」の左側が誰か、という事をあらわします。

 

余談になりますが、以下の場合、

 

function aConstructor()

{

    var aVal = 1;

    this.aFun = function () { alert(aVal); } 

}

 

とするとどちらも1になります。

つまり呼ぶ時の値を取れるthisはとても特別な物なのです。

 

さて、これだと困る事があります。

aFunをaと実行したい場合がある時です。

こういう時はapplyを使います。

afun.apply(a);

とすると、a.aFun()と同じように、thisとしてaを入れた後にafunを実行できます。

これはJavaScriptの関数オブジェクトのとても重要な機能です。

 

これを踏まえると、継承では無いけれど似た形での再利用が可能となります。

 

function aConstructor()

{

   this.aVal1 = 1;

   this.aVal2 = 2;

   this.aFun = function () { alert(this.aVal1); }

   this.aFun2 = function() { alert(this.aVal2); }

} 

 

というコンストラクタと、

function bConstructor()

{

   this.aVal1 = 1;

   this.aVal2 = 2;

   this.bVal = 3;

   this.aFun = function () { alert(this.aVal1); }

   this.aFun2 = function() { alert(this.aVal2); }

   this.bFun = function() { alert(this.bVal); }

} 

 

というコンストラクタがあったとしましょう。

青い部分がまったく同じコードになっています。

こういう時にはaConstructorのコードを再利用したくなります。

 

さて、どうやるのが良いでしょうか？

さて、ここで他から引き写したprototypeのコードで継承うんぬん言う前に、コンストラクタの振る舞いを見て見ましょう。

 

コンストラクタとはなんでしょうか？newつきで呼ばれた関数の事です。

どんな関数も、

 

new aConstructor();

とnewをつけて呼ばれればコンストラクタです。

逆にただ呼べば関数として使えます。

newをつけるとどういう動作が起きるかというと、

 

1. Objectをnewする

2. thisにobjectをセットする

3. aConstructorを呼ぶ

4. 1で作ったオブジェクトを返す

 

これがコンストラクタとして呼んだ時の振る舞いです。

さて、これを手作りで行ってみましょう。

 

var a = new Object();

aConstructor.apply(a);

 

これだけです。

 

さて、元の問題に戻ります。bConstructorというのがようするに

function bConstructor()

{

   thisに対してaConstructorの初期化

   this.bVal = 3;

   this.bFun = function() { alert(this.bVal); }

} 

 

赤文字で書いてある事ができれば、aConstructorの再利用はできます。

別に継承なんて必要ありません。

これにはいくつか方法がありますが、一番素朴な方法は、ここまで読んだ人ならわかるでしょう。

 

   aConstructor.apply(this);

 

です。通して書くと

 

function bConstructor()

{

   aConstructor.apply(this);

   this.bVal = 3;

   this.bFun = function() { alert(this.bVal); }

} 

 

となります。prototypeを使わなければこんなに素直にかけます。

これは入門者にはちょっとわかりにくいかもしれませんね。後ほどコンストラクタ周りは別エントリで書きます。

 

さて、aFunが呼ばれるつど、"hello"と表示してからaのaFunが呼ばれるようにしたいと思います。

 

function aHelloConstructor()

{

   aConstructor.apply(this);

   this.aFun = function () {

      alert("hello");

      aのaFunの処理

   }

}

 

となるようにしたいとします。

さて、どうしましょう？

function aHelloConstructor()

{

   aConstructor.apply(this);

   var Orga = this.aFun;

   this.aFun = function () {

      alert("hello");

      Orga();

   }

}

これでどうでしょう？

だめですね。Orgaの中身は

 

    function () { alert(this.aVal); }

です。Orga()と呼んだ時にthisに入るのは、Orgaの「.」の左側、そんな物ないですね。

つまり誰でもないグローバルのthisになってしまいます。

Orgaの中のthisにaHelloConstructorのthisを入れるには？

皆様にはもうお分かりですね。

   this.aFun = function () {

      alert("hello");

      Orga.apply(this);

   }

としなくてはいけません。

これで

var a = new aHelloConstructor();

a.aFun();

と呼べば、aConstructorの結果にhelloを追加できます。

上記青字の部分が、他の言語で言う所の

     base.aFun();

に相当します。

 

さて、ここらへんの基本を理解しているとして、もうちょっとアドバンスドな話題を。

継承なんて使わずにdelegateを使え、とは良く言われる事だと思いますが、そういう例がいまいちみかけられません。

先ほどのaConstructorに処理を渡す方法を考えて見ましょう。

 

次のお題はaFun2だけ使いたいけどaFun1はほしくなく、代わりにcFunという関数を定義したいとします。

もちろん

 

function cConst1()

{

    aConstructor.apply(this);

    this.aFun1 = undefined;

    this.cFun = function () { alert("cFun!"); }

}

 

とする事は出来ます。

実際JSはこういう事をやるのに向いているように作られていると私は思っていますし、正しくJS wayだと思います。

ただ、このようにメソッドとして作られている物を取り出したり勝手に上書きしたり、というのは、cConst1がaConstructorの「実装に」依存している事になります。

 

大切なのは継承の猿真似をする事ではありません。

もっと根本的な問題です。

データと手続きをひとつにする、という抽象を行っているのに、これを呼び出しメカニズムとして解釈してしまうのは抽象を解く事になります。

これはaというオブジェクトが持つ「契約」に反する使い方です。

 

本来は、

a = aConstructor();

a.aFun2();

と使われるのがaの使われ方で、this.aFun1をこっそり置き換えられたり、というのは通常の使われ方と違います。

 

では

function cConst2()

{

   var a = new aConstructor();

   this.aFun2 = function() { return a.aFun2(); }

   this.cFun = function () { alert("cFun!"); }

}

ではどうでしょう？

これならaをnewしてaのインターフェースを使用しているだけで、実装の詳細の知識はcConst2には入りません。

これはcとaの結合がより疎になった事を意味します。

 

aFun2をいちいち指定するのは大変？

関数の数次第ではあります。

まず、これをたくさん書かなくてはいけない、というのは設計時点にそれなりな問題がある可能性が高い。

 

ただ、そういう能書きはおいといて、少し簡単にする方法はあります。

 

JavaScriptは関数がコールされた時、その引数が「arguments」という名前の変数に入ります（厳密な言い方じゃないけど見逃してください）

その為、

function(a) { alert(a);}

と

 function() { alert(arguments[0]); };

は同じ意味です。

おいおい、引数の宣言がないぞ？って？

JavaScriptってそういう言語なんですよ…

 

さて、この事を考えると、ちょっと小細工が出来ます。

 

function delegate(base, current, methodname) {

    current[methodname] = function() { return base[methodname].apply(this, arguments); };

   // current.aFunはcurrent["aFun"]のシンタックスシュガーなのを思い出そう！

}

 

function cConst3()

{

   var a = aConstructor();

   delegate(a, this, "aFun1");

   delegate(a, this, "aFun2");

   this.cFun = function() { alert("cFun!"); }

}

 

これでaの契約のみによってaの機能が再利用出来ます。

ここで、うかつにfor inですべてをdelegate、のような事をすると、aの実装の詳細に影響を受ける事になるので注意です。

 

この方法だと、aとis aの関係をちゃんと作ろうとすると全メソッドを実装しないといけません。

ただ、ちょっと待ってください。

そんなにaのメソッドをすべて実装する必要のある物が多いのですか？

それはaのインターフェースが良く練られていない可能性が高いと思います。

 

なぜcConst1よりもcConst2やcConst3の方が理論上は（嫌な言葉ですね）望ましいのか。

それはもしaConstructorに偶然「cFun」という関数が実装されて、「aFun」の実装がこれに依存していた場合、つまり

 

function aConst2() {

    this.aVal = 3;

    this.cFun = function (arg) { alert(arg); }

    this.aFun = function() { this.cFun(this.aVal); }

}

 

function cConst() {

    aConst2.apply(this);

    this.cFun = function () { alert("cFun!"); }

}

 

var c = new cConst();

c.aFun();

 

これは赤い文字の部分がバッティングしているので機能しなくなります。

prototypeの差し替えでもそうですが、抽象を解くというのは危険な事です。

 

いろいろ言いたいことはありますが、そんな訳でJavaScriptで継承を実現するフレームワークでプログラムなんて出来たら避けたい事です。

JavaScriptの持ち味はこの言語の軽さです。

applyを駆使してメソッドを取り出したり、クロージャで固めたり。

この変幻自在さを失うような物を使って「JavaScriptはいまどきの使い方はprototypeを使って継承うんぬん」とか言われると、こんな長いblogのエントリが出来たりするのです:D