ES2015 の class

参考コード

React.Component を ES2015 の class 構文で書く前に、単なる JavaScript の ES2015 class 構文を復習します。

// class クラスネームで class を作成する
class Human {
  // constructor はクラスからインスタンスを作成した時に実行される
  constructor(name, age) {
    // this は作成されたインスタンスを指す
    this.name = name;
    this.age = age;
  }

  // クラスメソッド
  // クラスが持つファンクションのこと
  callMyProfile() {
    // 自分自身の値を参照するためにここでも this を使う
    console.log(this.name, this.age);
  }
}

// class からインスタンスを作成するために new 演算子を使う
// その際に引数も与える
const Nakanishi = new Human("Nakanishi", 30);

// console.log(Nakanishi.name);
// console.log(Nakanishi.age);

const Tanaka = new Human("Tanaka", 40);

// console.log(Tanaka.name);
// console.log(Tanaka.age);

// クラスメソッドにアクセスする
Nakanishi.callMyProfile();
Tanaka.callMyProfile();

最小限のクラスの作成

何もプロパティを持たない Human というクラスの作成と、Human クラスからインスタンスを作成し、Nakanishi という変数に代入する方法。

// クラスを定義する
class Human() {
  constructor() {}
}

// new 演算子を使って class からインスタンスを作成する
const Nakanishi = new Human();

new でインスタンスを作成する際に、引数を渡し、インスタンスのプロパティにアサインする

class Human() {
  constructor(name, age) {
    // this は new で作成されたインスタンスを指す
    // つまり自分自身
    this.name = name
    this.age = age
  }
}

const Nakanishi = new Human('Nakanishi', 30);
console.log(Nakanishi);

class が持つファンクション = class method を定義する

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  callMyProfile() {
    console.log(this.name, this.age);
  }
}

const Nakanishi = new Human("Nakanishi", 30);
// クラスメソッドの呼び出し
Nakanishi.callMyProfile();