これでできる! クロスブラウザJavaScript入門

第15回 プロトタイプと継承#2

この記事を読むのに必要な時間:およそ 2 分

こんにちは,太田です。前回は__proto__を使ってJavaScriptにおけるプロトタイプについて解説しました。今回はそこから発展して継承の方法を学びます。

JavaScriptにおける継承

まず,目標とする形を確認しておきましょう。やはり,前回同様Google ChromeのデベロッパーツールかSafariのウェブインスペクタのコンソールにて,次のコードを実行してみてください。

dirによるElementの解析

dir(document.createElement('span'))

実行結果は次の通りです。

図1 Chromeでの実行結果#1

図1 Chromeでの実行結果#1

こちらの通り,WebKitではspan要素はそれ自身にいくつものプロパティを持っています。もっと下のほうを見てみると,

図2 Chromeでの実行結果#2

図2 Chromeでの実行結果#2

さらに,span要素にも__proto__があり,それはHTMLElementのprototypeになっています。つまり,

span要素の__proto__とHTMLElement

var span = document.createElement('span');
span instanceof HTMLElement;// true
span.__proto__ === HTMLElement.prototype;// true

という関係になっています。さらにHTMLElementの__proto__はElementのprototypeであり,Elementの__proto__はNodeのprototypeです。簡単に図にしてみると次のようになります。

図3 span要素の継承関係

図3 span要素の継承関係

ところで,こういった継承関係を把握することはDOMを理解する上で極めて重要です。例えばElement.prototypeは,DOM仕様で定められているインターフェースと基本的に一致します。こういった仕様と実装な関係を確認することで,より正確にDOMを理解できます。

JavaScriptにおける継承

さて,前述のような継承を自分で定義したコンストラクタにおいて実現してみましょう。

プロトタイプとnewによるオブジェクトの生成

function A(){
}
A.prototype.a = function(){
  return 'a';
};
var a = new A();
console.log(a.a()); // a
function B(){
}
B.prototype.b = function(){
  return 'b';
};
var b = new B();
console.log(b.b()); // b

この例ではAとBは互いに独立しています。どのようにすればAとBを結びつけることができるのか,考えてみましょう。まず,目標とするのは次のような関係です。

図4 AとBの継承関係

図4 AとBの継承関係

コンストラクタとインスタンスと関係として

a.__proto__ === A.prototype

が成り立つことは何度か取り上げてきましたが,ここでさらに注目するのは

a.__proto__.__proto__ === B.prototype

という点です。すなわち,

A.prototype.__proto__ === B.prototype

ということです。ここで,

b.__proto__ === B.prototype

であることも加えると,

A.prototype.__proto__ === b.__proto__

という関係が導き出せます。

つまり,A.prototype が b( new B() ) であれば図4のような継承関係が成立するということです。

prototypeによる継承

function A(){
}
function B(){
}
B.prototype.b = function(){
  return 'b';
};

A.prototype = new B();
// A.prototype.__proto__ === B.prototypeとなる

A.prototype.a = function(){
  return 'a';
};

var a = new A();
console.log(a);
console.log(a instanceof B);// true
console.log(a.__proto__.__proto__ === B.prototype);// true

図5 AとBの継承関係#2

図5 AとBの継承関係#2

目的の通り,aはAのインスタンスであり,Bのインスタンスでもあるという継承関係を作ることができました。しかし,__proto__: B と表示されている点が気になると思います。これはconstructorがBしか存在しないためです。constructorを明示的に指定すればこの問題は解消できます。

prototypeによる継承#2

function A(){
}
function B(){
}
B.prototype.b = function(){
  return 'b';
};

A.prototype = new B();
A.prototype.constructor = A; // ※追加

A.prototype.a = function(){
  return 'a';
};

var a = new A();
console.log(a);

図6 AとBの継承関係#3

図6 AとBの継承関係#3

これで目標としていた継承を実現することができました。

継承時の注意点

今回紹介した方法には注意すべき点があります。それはコンストラクタ内の処理です。今回のサンプルではコンストラクタAもBも何もしない関数として定義しているので,new A(),new B()のように呼び出した時も何も処理が行われないため問題ありません。しかし,もしBのなかで何かしらの処理をしていた場合,意図しない処理になってしまう可能性があります。

prototypeによる継承

function A(){
  alert('A');
}
function B(){
  alert('B');
}
B.prototype.b = function(){
  return 'b';
};

A.prototype = new B(); // ここでもalert
A.prototype.constructor = A;

A.prototype.a = function(){
  return 'a';
};

var a = new A();
console.log(a);

この例では,AにBを継承させるための処理でalert('B')が呼ばれてしまいます。これは少々不都合があります。

そこで,newするためのダミー関数を用意する方法がよく使われます。

prototypeによる継承

function A(){
  alert('A');
}
function B(){
  alert('B');
}
B.prototype.b = function(){
  return 'b';
};

var dummy = function(){
};
dummy.prototype = B.prototype;
A.prototype = new dummy();
A.prototype.constructor = A;

A.prototype.a = function(){
  return 'a';
};

var a = new A();
console.log(a);
console.log(a instanceof B);// true

一見すると,aはBのインスタンスではなく,dummyのインスタンスとなり,a instanceof Bがfalseになるのではないかと思われるでしょう。しかし,dummy.prototype = B.prototypeとしているところが重要で,つまりnew dummy()の__proto__はB.prototypeであり,A.prototypeはBのインスタンスとなります。

まとめ

今回はプロトタイプベースの継承の具体的な方法を学びました。少々理解し難いところがあるかもしれませんが,prototypeと__proto__の関係をしっかりと押さえていけば,そう難しくはないと思います。次回はprototypeに関連してthisとcallを解説します。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

  • 質問

    説明文中に以下の記述がありますが、
    A.prototype = new B();
    // A.prototype.__proto__ === B.prototypeとなる

    上記のように、
    A.prototype = new B();
    を実行した場合、
    A.prototype.__proto__ === B.prototype
    とはならずに、
    A.prototype.__proto__ === Object.prototype
    になると思います。

    AがBを継承したい場合は、
    A.prototype.__proto__ = B.prototype
    が正解だと思います。

    Commented : #1  Ichiro Itaya (2014/09/25, 18:55)

コメントの記入