【Closure library】クラス継承とgoog.baseの呼び出し

Closure libraryを用いたクラスの継承とgoog.baseを用いた時の呼び出しについてのサンプルを用意した。

1. 概要

---

cClass,
cClassを継承したbClass,
bClassを継承したaClass

を用意し、
aClassのインスタンス生成によって
cClassのメソッドと呼び出す

2.コード

---

まずディレクトリの構成から。

次にindex.htmlのbody部分。
この時、
c,b,a,の順番で読み込まなければ動作しないので注意。

index.html

<!--c,b,aの順番で読み込む-->
<script src="js/cclass.js"></script>
<script src="js/bclass.js"></script>
<script src="js/aclass.js"></script>

<script>
    //aClassのインスタンスを生成
    var aInstance = new js.aClass();
</script>

次にaClass

aclass.js

js.aClass = function (){

goog.provide('js.aClass');
goog.require('js.bClass');

js.aClass = function (){

  //継承先のコンストラクタを実行する
  goog.base(this);

  this.aMethod();
};

//js.bClassを継承する
goog.inherits(js.aClass, js.bClass);

//aClassの持つメソッド
js.aClass.prototype.aMethod = function(){
  console.log("this is aClass");
};

bclass。

bclass.js

goog.provide('js.bClass');
goog.require('js.cClass')

js.bClass = function (){

  //継承先のコンストラクタを実行する
  goog.base(this);

  this.bMethod();
};

//js.cClassを継承する
goog.inherits(js.bClass, js.cClass);

//cClassの持つメソッド
js.bClass.prototype.bMethod = function(){
  console.log("this is bClass");
};

最後にcclass。

cclass.js

goog.provide('js.cClass');

js.cClass = function (){
  this.cMethod();
};

//cClassの持つメソッド
js.cClass.prototype.cMethod = function(){
  console.log("this is cClass");
};

3.結果

---

サンプルを動かすと
"this is cClass "
↓
"this is bClass "
↓
"this is aClass "

の順番で処理が走る。

もしも
a→b→cの順に処理させたければ、

aclass.js

js.aClass = function (){

  this.aMethod();

  //継承先のコンストラクタを実行する
  goog.base(this);

};

のように、goog.baseを後ろに書くことで
継承先のメソッド呼び出しをあとに持ってくることができる。