JavaScript のクラス定義と継承

クラスの定義

正直色々ありすぎて難しい。
クロージャでやる場合と、プロトタイプでやる場合とに分けられるっぽい。

クロージャによるクラスの定義

view plainprint?

1. function Calc(x, y)  
2. {  
3.  this.x = x;  
4.  this.y = y;  
5.  this.add = function()  
6.  {  
7.   return x + y;  
8.  }  
9. }  
10. alert(new Calc(1,2).add());  

function Calc(x, y)
{
 this.x = x;
 this.y = y;
 this.add = function()
 {
  return x + y;
 }
}
alert(new Calc(1,2).add());

プロトタイプによるクラスの定義その1

view plainprint?

1. function Calc()  
2. {  
3.  this.initialize.apply(this, arguments);  
4. }  
5.   
6. Calc.prototype.x = 0;  
7. Calc.prototype.y = 0;  
8. Calc.prototype.initialize = function()  
9. {  
10.  var o = this;  
11.  o.x = arguments[0];  
12.  o.y = arguments[1];  
13. }  
14. Calc.prototype.add = function()  
15. {  
16.  var o = this;  
17.  return o.x + o.y;  
18. }  
19.   
20. alert(new Calc(1,2).add()); // 結果 : 3  

function Calc()
{
 this.initialize.apply(this, arguments);
}

Calc.prototype.x = 0;
Calc.prototype.y = 0;
Calc.prototype.initialize = function()
{
 var o = this;
 o.x = arguments[0];
 o.y = arguments[1];
}
Calc.prototype.add = function()
{
 var o = this;
 return o.x + o.y;
}

alert(new Calc(1,2).add()); // 結果 : 3

こちらは、プロトタイプに追加している。

プロトタイプによるクラスの定義2

view plainprint?

1. function Calc()  
2.   
3.  this.initialize.apply(this, arguments);  
4. }  
5.   
6. Calc.prototype =   
7. {  
8.  x : 0,  
9.  y : 0,  
10.  initialize : function()  
11.  {  
12.   x = arguments[0];  
13.   y = arguments[1];  
14.  },  
15.  add : function()  
16.  {  
17.   return x + y;  
18.  }  
19. }  
20.   
21. alert(new Calc(1,2).add()); // 結果3  

function Calc()

 this.initialize.apply(this, arguments);
}

Calc.prototype = 
{
 x : 0,
 y : 0,
 initialize : function()
 {
  x = arguments[0];
  y = arguments[1];
 },
 add : function()
 {
  return x + y;
 }
}

alert(new Calc(1,2).add()); // 結果3

こちらは、プロトタイプを上書きしている。
こっちのほうがスッキリしてていいけど、これだと継承するときに問題がある。

クラスの継承

クラスにも色々と方法がある。
とりあえず、プロトタイプによる継承の場合、基本的には

view plainprint?

1. function CalcEx()  
2. {  
3.  this.initialize.apply(this, arguments);  
4. }  
5.   
6. CalcEx.prototype = new Calc();  
7.   
8. alert(new CalcEx(3,4).add()); // 結果7  

function CalcEx()
{
 this.initialize.apply(this, arguments);
}

CalcEx.prototype = new Calc();

alert(new CalcEx(3,4).add()); // 結果7

とするわけだけど、継承したクラスを『プロトタイプによるクラスの定義2』の パターンで定義してしまうと、プロトタイプを上書きしてしまうので、 継承元で定義した prototype が消えてしまう。 なので、プロトタイプを利用したクラス定義を行うなら、プロトタイプに追加する パターンが望ましい。

※もっとも、色々な方法でもって、拡張する方法がいくらでも存在する。要勉強