[javascript メモ] 継承に関するメモ

A.
プロトタイプに親のインスタンスを指定して継承する方法
子のprototypeに親のインスタンスを渡すことで
プロトタイプチェーンを使い継承します。
// 親のコンストラクタ
var A = function(nickname){
  this.nickname = nickname;
};

// 親のコンストラクタにメソッドの追加
A.prototype.getName = function(){
  return this.nickname;
}

// 子のコンストラクタ
var B = function(nickname, age){
  this.age = age;
  // 親のコンストラクターを呼んでプロパティを引き継ぐ
  A.apply(this, [nickname]);
};

// プロトタイプチェーンを設定
// 親のオブジェクトをプロトタイプにつなげる
B.prototype = new A(); 

// 子にprototypeを追加したい場合 親をつなげてから
// つなげたオブジェクトに対してメソッドを追加する
B.prototype.getAgeName = function(){
  return 'Age:' + this.age  + ' Nick:' + this.nickname;
}

// 親のメソッドと結合する
B.prototype.getName = function(){
  var name = A.prototype.getName.call(this);
  return name + '(' + this.age + ')';
}

// 親のオブジェクトのプロパティが重複するので必要なら削除する
//  delete B.prototype.nickname; 
// コンストラクタを本来あるべきものに戻す
B.prototype.constructor = B; 

// インスタンスの作成
var obj = new B('nic', 20);
var obj2 = new B('yaki', 30);
console.log( obj.getName() );
console.log( obj.getAgeName() );
console.log( obj2.getName() );
console.log( obj2.getAgeName() );

console.dir( obj );
コンソールログは以下のようになります
js_inherit_1.png

結果を図で表してみると以下のようになります
js_inherit_2.png


親のコンストラクタのプロパティをcallし親のコンストラクタのprototypeをコピー
// 親のコンストラクタ
var A = function(nickname){
  this.nickname = nickname;
};

// 親のコンストラクタにメソッドの追加
A.prototype.getName = function(){
  return this.nickname;
}

// 子のコンストラクタ
var B = function(nickname, age){
  this.age = age;
  // 親のコンストラクターを呼んでプロパティを引き継ぐ
  A.apply(this, [nickname]);

  for(var p in A.prototype){
    var proto = this.constructor.prototype;
    if(!proto[p]) proto[p] = A.prototype[p];
  }
};

// メソッドを追加する
B.prototype.getAgeName = function(){
  return 'Age:' + this.age  + ' Nick:' + this.nickname;
};

// 親のメソッドと結合する
B.prototype.getName = function(){
  var name = A.prototype.getName.call(this);
  return name + '(' + this.age + ')';
}

var obj = new B('nic', 20);
var obj2 = new B('yaki', 30);
console.log( obj.getName() );
console.log( obj.getAgeName() );
console.log( obj2.getName() );
console.log( obj2.getAgeName() );

console.dir( obj );
コンソールログは以下のようになります
js_inherit_3.png

結果を図で表してみると以下のようになります
js_inherit_4.png
親のプロパティをnew時にコピーするので、あとから追加しても反映されません。