文書の過去の版を表示しています。
— y2sunlight 2021-05-31
本章では、ES2015*2015で採用されたオブジェクト指向構文を中心にモダンなコードの記述方法について説明します。それ以前のオブジェクト指向を実装するための文法については、オブジェクトの基本を参照して下さい。
ES2015では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。
class Student {
// コンストラクタの定義
constructor(name) {
// プロパティの定義
this.name = name;
}
// メソッドの定義
greeting() {
console.log(`I am ${this.name}.`);
}
}
var suzuki = new Student('suzuki');
suzuki.greeting(); // I am suzuki.
class構文は内部的に新しく導入された構文ではなく、あくまでもこれはES2015以前のfunctionコンストラクタの構文糖です。関数型のプロパティとして実装していたメソッドは、他の言語と同様に関数定義として記述できるようになりました。
但し、class構文には以下の制限があります。これらは制限というよりも、・・・です。
ES2015ではclass構文の中でアクセッサーを定義できるようになりました。
class Student {
// コンストラクタの定義
constructor(name) {
// プロパティの定義
this._name = name;
}
// ゲッター
get name() {
return this._name;
}
// セッター
set name(value) {
this._name = value;
}
// メソッドの定義
greeting() {
console.log(`I am ${this._name}.`);
}
}
var suzuki = new Student();
suzuki.name = "suzuki";
console.log(suzuki.name); // suzuki
suzuki.greeting(); // I am suzuki.
staticキーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。
class Student {
// コンストラクタの定義
constructor(name) {
// プロパティの定義
this.name = name;
}
// メソッドの定義
greeting() {
console.log(`I am ${this.name}.`);
}
// 静的プロパティの定義
static age = 15;
// 静的メソッドの定義
static getSchoolName() {
return 'AbcSchool';
}
}
console.log(Student.age); // OK (15)
console.log(Student.getSchoolName()); // OK (AbcSchool)
静的メソッドは、インスタンスからアクセスすることはできません。
var taro = new Student('taro');
taro.name = 'suzuki taro' // OK
taro.greeting(); // OK (I am suzuki taro.)
console.log(taro.age); // NG (undefined)
console.log(taro.getSchoolName()); // NG (taro.getSchoolName is not a function)
ES2015以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では extends と super キーワードを使いこれを実現することができます。
下の例は、前述のStudentクラスを継承した例です。
TODO: 例
* extends