ES6クラスに反応する


クラス

ES6はクラスを導入しました。

クラスは関数の一種ですが、キーワード functionを使用して開始する代わりに、キーワードを使用し class、プロパティは constructor()メソッド内で割り当てられます。

単純なクラスコンストラクター:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

クラス名の大文字小文字に注意してください。「車」という名前を大文字で始めました。これは、クラスの標準的な命名規則です。

これで、Carクラスを使用してオブジェクトを作成できます。

Carクラスに基づいて「mycar」というオブジェクトを作成します。

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

注:コンストラクター関数は、オブジェクトが初期化されるときに自動的に呼び出されます。


w3schools CERTIFIED . 2022

認定を受けましょう!

Reactモジュールを完了し、演習を行い、試験を受けて、w3schools認定を取得してください!!

95ドル登録

クラスのメソッド

クラスに独自のメソッドを追加できます。

「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クラスのセクションをご覧ください