JavaScriptでクラス定義

2015.11.14

JavaScriptでクラス定義

JavaScriptではnew演算子がありますが、クラスというのは存在しません。

newするとコンストラクタからインスタンスを生成します。

function Car(speed,color){
  this.speed = speed;
  this.color = color;
}
var car = new Car(40,'black');// インスタンス生成

thisがいきなり出てきましたが、thisという空のオブジェクトが定義されてreturnされているという感じです。

function Car(speed,color){
  // this = {};
  this.speed = speed;
  this.color = color;
  // return this;
}
var car = new Car(40,'black');// インスタンス生成

new演算子を使用するとconstructorプロパティが生成され、newしたコンストラクタを参照しています。

以下、constructorをalertしたソースです。

<script type="text/javascript">
function Car(speed,color){
// this = {};
this.speed = speed;
this.color = color;
// return this;
}
var car = new Car(40,'black');
alert(car.constructor);
</script>

DEMO

次にprototypeプロパティについてです。

関数宣言するとprototypeプロパティが生成されます。

function Car(){}
// これでもprototypeプロパティが生成される
Car.prototype.speed = 40;
Car.prototype.warn = function() {
                       alert("warn");
                     }
var car = new Car();
alert(car.speed);
car.warn();

DEMO

carは何も定義していないCarをnewしたにもかかわらず、car.speedやcar.warn()が使えます。

prototypeは関数の親メソッド・プロパティのようなイメージです。

個別にメソッドやプロパティを定義したい場合は関数宣言に定義し、関数共通のメソッドやプロパティはprototypeで定義するべきです。

また、prototypeが親なので、関数宣言時に同じ名前のプロパティなどを宣言するとオーバーライドされます。

function Car(speed,color){
  this.speed = speed;
}
Car.prototype.speed = 20;
var car = new Car(40,'blue');
alert(car.speed);

DEMO

コメント

タイトルとURLをコピーしました