ES6のクラス定義について

投稿日：2017年12月6日更新日：2020年5月5日

概要

JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。
プロトタイプを使ってクラスと同等なことを実現するということがJavaScriptでも行われていました。
ECMAScript 6(ES6)でJavaScriptにも「クラス」の文法が追加されました。
Javascriptにはクラスという概念はないため、クラスベースの言語のクラスとは異なり、あくまでも、今までのプロトタイプを使った記述をClassで定義できるようになっただけ。
クラス定義の中ではメソッドしか定義出来ない。

クラスとコンストラクタの定義

ES6ではclassキーワードを使ってクラスを定義
classのブロックの中でconstructorという名前の関数を定義するとそれがコンストラクタとして利用されます。

メンバ変数 (インスタンス変数)

クラスの内部でメンバ変数を定義・参照するにはthis.<プロパティ名>を使います。プロパティの概念はないが、this.変数で定義される変数はpublicなプロパティ名として見える。
JavaScriptではJavaやC++のようにthisを省略することは出来ない。
javascriptには、privateやprotectedのようなアクセス修飾子が存在しない。

メソッド定義と呼び出し

classブロックの中にconstructor以外の名前の関数を定義するとメソッドになります。
メソッド内から他のメソッドの呼び出しを行う場合はthis.<メソッド名>(引数)を使います。メソッド呼び出しの際にthis を省略することは出来ない。
javascriptには、privateやprotectedのようなアクセス修飾子が存在しない。ただし名前規約で private なものを名前でわかりやすくして間違えてアクセスしないようにすることはできます。 Google の JavaScript のスタイルガイドでは private なメソッド, メンバ変数は名前の末尾に _ をつけることが求められています。
プロパティの考えはなく、定義できるのはメソッドのみ。

継承

ES6 JavaScriptでクラスを継承するにはextendsを使います。
親クラスのコンストラクタを呼び出すにはsuper(...)を使います。
子クラスで親クラスと同名のメソッドを定義すればメソッドがオーバーライドされます。
子クラスから親クラスのメソッドを呼び出すにはsuper.methodName(...)のようにします。
コンストラクタの上書き時はsuperを入れる

// 継承元のクラス
class SuperTest {
  constructor() {
    this.name = 'Super';
  }
}

// 継承先のクラス
class SubTest extends SuperTest {
  constructor() {
    super();// 必須
    this.name = 'Sub'
  }
}

// 継承元のクラス

class SuperTest {

constructor() {

this.name = 'Super';

}

// 継承先のクラス

class SubTest extends SuperTest {

constructor() {

super();// 必須

this.name = 'Sub'

}

静的メソッド（クラスメソッド）

class構文は、静的メソッドの定義方法も用意しています。

クラスのインスタンスを作らずとも呼べるメソッドのこと。

class Cat {
  /* 静的メソッド */
  static print() {
    console.log("static");
  }
}

class Cat {

/* 静的メソッド */

static print() {

console.log("static");

}

参考にさせて頂いたページです。

・ES6 におけるJavaScriptのクラス定義

・ES2015新機能: JavaScriptのclassとmethod

・javascriptでprivate変数とメソッドを定義する方法

執筆者：kei