こんにちは、太田です。前回は__proto__を使ってJavaScriptにおけるプロトタイプについて解説しました。今回はそこから発展して継承の方法を学びます。
JavaScriptにおける継承
まず、目標とする形を確認しておきましょう。やはり、前回同様Google ChromeのデベロッパーツールかSafariのウェブインスペクタのコンソールにて、次のコードを実行してみてください。
実行結果は次の通りです。
こちらの通り、WebKitではspan要素はそれ自身にいくつものプロパティを持っています。もっと下のほうを見てみると、
さらに、span要素にも__proto__があり、それはHTMLElementのprototypeになっています。つまり、
という関係になっています。さらにHTMLElementの__proto__はElementのprototypeであり、Elementの__proto__はNodeのprototypeです。簡単に図にしてみると次のようになります。
ところで、こういった継承関係を把握することはDOMを理解する上で極めて重要です。例えばElement.prototypeは、DOM仕様で定められているインターフェースと基本的に一致します。こういった仕様と実装な関係を確認することで、より正確にDOMを理解できます。
JavaScriptにおける継承
さて、前述のような継承を自分で定義したコンストラクタにおいて実現してみましょう。
この例ではAとBは互いに独立しています。どのようにすればAとBを結びつけることができるのか、考えてみましょう。まず、目標とするのは次のような関係です。
コンストラクタとインスタンスと関係として
が成り立つことは何度か取り上げてきましたが、ここでさらに注目するのは
という点です。すなわち、
ということです。ここで、
であることも加えると、
という関係が導き出せます。
つまり、A.prototype が b( new B() ) であれば図4のような継承関係が成立するということです。
目的の通り、aはAのインスタンスであり、Bのインスタンスでもあるという継承関係を作ることができました。しかし、__proto__: B と表示されている点が気になると思います。これはconstructorがBしか存在しないためです。constructorを明示的に指定すればこの問題は解消できます。
これで目標としていた継承を実現することができました。
継承時の注意点
今回紹介した方法には注意すべき点があります。それはコンストラクタ内の処理です。今回のサンプルではコンストラクタAもBも何もしない関数として定義しているので、new A()、new B()のように呼び出した時も何も処理が行われないため問題ありません。しかし、もしBのなかで何かしらの処理をしていた場合、意図しない処理になってしまう可能性があります。
この例では、AにBを継承させるための処理でalert('B')が呼ばれてしまいます。これは少々不都合があります。
そこで、newするためのダミー関数を用意する方法がよく使われます。
一見すると、aはBのインスタンスではなく、dummyのインスタンスとなり、a instanceof Bがfalseになるのではないかと思われるでしょう。しかし、dummy.prototype = B.prototypeとしているところが重要で、つまりnew dummy()の__proto__はB.prototypeであり、A.prototypeはBのインスタンスとなります。
まとめ
今回はプロトタイプベースの継承の具体的な方法を学びました。少々理解し難いところがあるかもしれませんが、prototypeと__proto__の関係をしっかりと押さえていけば、そう難しくはないと思います。次回はprototypeに関連してthisとcallを解説します。