JavaScriptのstaticを理解する

staticとは

class内で使用できる、静的なメソッドを定義する際のキーワードのことです。
以下にように、Person.hello()と直接呼ぶことができます。

class Person {
  static hello() {
    console.log('hello');
  }
}

Person.hello(); // hello

このように、インスタンス化を行わずに使用できるメソッドを静的メソッドまたはstaticメソッドと言います。

thisは使用できない

インスタンス化を行っていないので、Personからインスタンスは生成されていません。
よってこの状態ではstaticメソッドの中でthisを使用することはできません。

class Person {
  static hello() {
    console.log('hello ' + this);
  }
}

Person.hello();

出力結果↓

hello class Person {
  static hello() {
    console.log('hello ' + this);
  }
}

thisにアクセスすると、クラスの表記自体が出力されます。
Personからインスタンス化を行っていないので、このthisが参照する先のオブジェクトがPersonクラスになっています。

staticメソッドをコンストラクター関数で扱う

staticメソッドはコンストラクター関数を使うと以下のように記述できます。

function Person2(name, age) {
  this._name = name;
  this._age = age;
}

Person2.hello = function () {
  console.log('hello');
};

Person2.hello(); // hello

Personのstaticメソッドのhelloが格納されたことになるので、Person.hello()で呼び出すことができます。

class内のstaticメソッドの取り扱い

classを用いた場合には、コンストラクター関数に対してメソッドが追加されたものをstaticメソッドとして取り扱っています。

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  static hello() {
    console.log('hello');
  }
}

const person = new Person('Taro', 20);
console.log(person.constructor === Person); // true

personの中身は以下のようになっています。

[[Prototype]]の中に、constructorが追加されています。
こちらは先ほどのコンストラクター関数のことを指していて、person.constructor === Personとすると結果はtrueになります。

classの場合もconstructorは関数であり、Personとイコールになります。
また、person内の[[Prototype]]の中のconstructorにhelloメソッドが格納されていることがわかります。

よって、constructor関数に対してhelloを追加したものが、staticメソッドということになります。

参考資料