JavaScript クラス

コース推薦：

ECMAScript 2015、もしくは ES6 で JavaScript クラスが導入されました。

JavaScript クラスは、JavaScript オブジェクトのテンプレートです。

文法

キーワードを使用してください class クラスを作成します。

常に「constructor」と名付けた constructor() のメソッド：

文法

class ClassName {
  constructor() { ... }
}

インスタンス

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

上の例では、"Car" という名前のクラスを作成しました。

このクラスには2つの初期属性があります："name" と "year"。

JavaScript クラスこれはオブジェクトです。

それは単なる JavaScript オブジェクトのテンプレート。

クラスを使用する

クラスがある場合、そのクラスを使用してオブジェクトを作成できます：

インスタンス

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

自分で試してみる

上の例では Car クラス2つを作成しました Car オブジェクト。

新しいオブジェクトを作成するときに自動的に呼び出されます。

Constructor メソッド

コンストラクタメソッドは特別なメソッドです：

  • 「コンストラクタ」という正確な名前を持っている必要があります
  • 新しいオブジェクトを作成すると自動的に実行されます
  • オブジェクトの属性を初期化するために使用されます
  • コンストラクタメソッドが未定義の場合、JavaScript は空のコンストラクタメソッドを追加します。

Class メソッド

クラスメソッドの作成

文法

オブジェクトメソッドと同じように。

キーワードを使用してください class クラスを作成します。

常に追加してください constructor() メソッド。

その後、任意の数のメソッドを追加します。

文法

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

「age」というクラスメソッドを作成し、車齢を返します：

インスタンス

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "私の車は" + myCar.age() + "歳です.";

自分で試してみる

クラスメソッドに引数を送信できます：

インスタンス

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age(year) + " years old.";

自分で試してみる

ブラウザのサポート

以下の表は、JavaScript クラスを完全にサポートする最初のブラウザのバージョンを示しています：

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
2016年3月 2015年7月 2016年3月 2015年10月 2016年3月

このチュートリアルの後半では、JavaScript クラスについてもっと学びます。