ES5のクラス class もどき prototype


See the Pen used class js by nakanishi (@nakanishi) on CodePen.

ES5 にクラスはない。コンストラクタでインスタンスを作成するが、このコンストラクタも実態は単なる関数。関数を実行してオブジェクトを作っているだけ。

作成されるインスタンスは、プロパティをコンストラクタで定義され、メソッドはそのコンストラクタ.prototypeにあるものを「参照」する。

クラスを extend するためには、プロトタイプチェーンを使って継承する。

メソッドを継承するのは簡単だが、コンストラクタを継承するには少し細かく書く。callで元のコンストラクタを、新しいコンストラクタで初期化する内容を書く部分で実行する。

var Human4 = function (name){
 //プロパティ
 this.name = name;
 //メソッド 
};

//prototypeが大事
Human4.prototype.callOwnName = function(){
 console.log("Human4: my name is " + this.name ); 
 };
//あらたにManクラスを作成
var Man = function(name,job){
	//受けうつぐuman4つまりコンストラクタを、このコンテキストのthisで実行。引数はname
	Human4.call(this,name);
	this.job = job;
};
//Humanを継承
Man.prototype = new Human4();
//Manだけのメソッドを追加
Man.prototype.myJob = function(){console.log("my job is "+ this.job);};

//インスタンスを作成
var nakanishiMan = new Man("nakanishiMan","Web Developper");
nakanishiMan.bark();
console.log(nakanishiMan.job);
nakanishiMan.myJob();

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です