タグ: ES2015

脱初心者、目指せ中級者！
このところJavaScriptのclass構文を集中して学習しています。そこから得た知識のメモです。

言葉の定義を整理する

• クラス
• インスタンス
• コンストラクタ
• プロパティ(メンバ変数)
• メソッド(メンバ関数)
• 継承

まずは簡単なclassの構文サンプルをご紹介。

class name{
	constructor(myoji,namae){
		this.myoji = myoji;
		this.namae = namae;
	}
	getfullName(){
		return this.myoji　+ this.namae;
	}
}

var N = new name('やまだ','たろう');
console.log(N.getfullName());

クラス

class name{
    // コンストラクタで初期化
    // メソッドを記述
}

まずはclassキーワードを使ってclassを宣言します。(変数に代入して定義する方法もあるようです。)

後述するコンストラクタやメソッドを定義し、newキーワードでインスタンス化して使用します。メソッドを実行するにはインスタンス化した後に呼び出す必要があります。

コンストラクタ

コンストラクタ は、new式でクラスから定義されるオブジェクトの生成時に(クラスをインスタンス化するときに)、自動的に呼び出されるメソッドです。プロパティ(メンバ変数)の初期化を行います。

class name{
    //コンストラクタを定義
    constructor(myoji,namae){
        this.myoji = myoji; //プロパティを初期化
        this.namae = namae; //プロパティを初期化
    }
}

メソッド

class宣言直下に記述した関数のことをメソッドと呼びます。通常の関数とは振る舞いが異なります。

メソッドでプロパティを使うには、this.をつけて呼び出します。

JavaScriptのclassでは、class宣言の直下ではコンストラクタとメソッドしか定義できません。通常の関数のようなfunction宣言は不要です。(というか、構文エラー)

class name{
    constructor(myoji,namae){
        this.myoji = myoji; //プロパティを初期化
        this.namae = namae; //プロパティを初期化
    }
    //メソッドを定義
    getfullName(){
        return this.myoji　+ this.namae;
    }
}

インスタンス

クラスからインスタンスを生成します。メソッドも呼び出します。

class name{
    constructor(myoji,namae){
        this.myoji = myoji; //プロパティを初期化
        this.namae = namae; //プロパティを初期化
    }
    //メソッドを定義
    getfullName(){
        return this.myoji　+ this.namae;
    }
}

var N = new name('やまだ','たろう'); //インスタンスを生成
console.log(N.getfullName()); //メソッドを実行 -> やまだたろう

継承

あらかじめ作成した別のクラスを継承して新しいクラスを作ることもできます。構文としてはextendsキーワードを使います。

継承元からプロパティやメソッドを呼び出すにはsuper.キーワードを使います。

継承元にあるメソッドと同じ名前でメソッドを作るとオーバーライドすることができます。

class person extends name{
	constructor(myoji,namae,age,blood,address){
		super(myoji,namae); //継承元のコンストラクタを呼び出す
		this.age = age;
		this.blood = blood;
		this.address = address;
	}

	createPerson(){
		let fullName = super.getfullName(); //継承元のメソッドを呼び出す
		return fullName + 'の血液型は' + this.blood + '型で、年齢は' + this.age + '歳' + 'です。' + this.address + 'に住んでいます。';
	}
}

var p = new person('さとう','たろう','1','A','北海道');
console.log(p.createPerson()); //さとうたろうの血液型はA型で、年齢は1歳です。北海道に住んでいます。

classに関する機能や構文、仕様はまだまだたくさんあるようですが、ひとまず自分が現状で分かった範囲はこのような感じです。

もっともっと学習と実践を重ねてよりよいコードが書けるようがんばります！