JavaScript クラス

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

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クラスを作成します Carオブジェクト。

新しいオブジェクトを作成するときに自動的に呼び出されます（構造メソッド）。

構造メソッド

構造メソッドは特別なメソッドです：

  • 「constructor」という正確な名前を持たなければなりません
  • 新しいオブジェクトを作成すると自動的に実行されます
  • オブジェクトの属性を初期化するために使用されます
  • 構造メソッドが未定義の場合、JavaScriptは空の構造メソッドを追加します。

クラスメソッド

クラスメソッドの文法はオブジェクトメソッドと同じです。

クラスを作成するには、キーワード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 =
"My car is " + myCar.age() + " years old.";

自分で試してみる

クラスメソッドにパラメータを送信できます：

インスタンス

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月

"use strict"

クラスの構文は厳格モードで書かれなければなりません。

厳格モードのルールに従わない場合、エラーメッセージを受け取ります。

インスタンス

厳格モードで、宣言しないで変数を使用するとエラーが発生します：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // これは動作しません
    let date = new Date(); // これは動作します
    return date.getFullYear() - this.year;
  }
}

自分で試してみる

で JS 厳格モード 「厳格モード」についての詳細を学ぶためにここで学びます。