React ES6class
class(クラス)
ES6でclassが導入されました。
クラスは関数の一種ですが、functionそれを開始するためにキーワードを使用する代わりに、キーワードを使用しclass、プロパティはconstructor()メソッド内で割り当てられます。
例
シンプルなクラスコンストラクター:
class Car {
constructor(name) {
this.brand = name;
}
}
クラス名の大文字小文字に注意してください。「Car」という名前は頭文字が大文字です。これはクラスの標準的な命名規則です。
Carクラスを使用してオブジェクトを作成できるようになりました。
例
Carクラスに基づいて「mycar」というオブジェクトを作成します。
class Car {
constructor(name) {
this.brand = name;
}
}
const mycar = new Car("Ford");
注：オブジェクトが初期化されると、コンストラクター関数が自動的に呼び出されます。
クラスのメソッド
クラスに独自のメソッドを追加できます。
例
「present」という名前のメソッドを作成します。
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();
上記の例でわかるように、オブジェクトのメソッド名とそれに続く括弧を参照してメソッドを呼び出します(パラメーターは括弧内に入ります)。
クラス継承
クラス継承を作成するには、extendsキーワードを使用します。
クラス継承で作成されたクラスは、別のクラスからすべてのメソッドを継承します。
例
「Car」クラスからメソッドを継承する「Model」という名前のクラスを作成します。
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show();
このsuper()メソッドは親クラスを参照します。
super()コンストラクターメソッドでメソッドを呼び出すことで、親のコンストラクターメソッドを呼び出し、親のプロパティとメソッドにアクセスできます。
クラスの詳細については、JavaScriptクラスセクションをご覧ください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。