javascript クラスメソッドを作成する

作成日 2020.10.26
更新日 2022.07.14
javascript
javascript

javascriptで、ES6（ECMAScript 2015）から利用することができるクラス構文の静的メソッド（クラスメソッド）作成する方法を記述してます。

1. 環境
2. クラスメソッド作成

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

クラスメソッド作成

メソッドに「static」を宣言することで、クラスメソッドを作成することが可能です。

// グローバルスコープ
var count = 0;

class Hoge {

  constructor() {
    count++;
  }

  // クラスメソッド
  static getCount() {
    return count;
  }
}

// クラス名＋メソッドで呼び出すことができる
console.log( Hoge.getCount() );// 0

// constructorを実行
const hoge1 = new Hoge;
console.log( Hoge.getCount() );// 1

const hoge2 = new Hoge;
console.log( Hoge.getCount() );// 2

const hoge3 = new Hoge;
console.log( Hoge.getCount() );// 3

「static」がないと当然エラーになります。

// グローバルスコープ
var count = 0;

class Hoge {

  constructor() {
    count++;
  }

  // staticなし
  static getCount() {
    return count;
  }
}

// クラス名＋メソッドで呼び出すことができる
console.log( Hoge.getCount() );// Uncaught TypeError: Hoge.getCount is not a function

// constructorを実行
const hoge1 = new Hoge;
console.log( Hoge.getCount() );

const hoge2 = new Hoge;
console.log( Hoge.getCount() );

const hoge3 = new Hoge;
console.log( Hoge.getCount() );

「static」を使用すれば、静的なプロパティを作成することもできます。

class Hoge {

  constructor() {
    count++;
  }

  // 静的プロパティ
  static name = "mebee";

  // クラスメソッド
  static getCount() {
    return count;
  }
}

console.log(Hoge.name); // mebee

クラスを継承しても、利用することができます。

//グローバルな変数
var count = 0;

class Hoge {

  constructor() {
    count++;
  }

  // クラスメソッド
  static getCount() {
    return count;
  }
}

class Foo extends Hoge {
  bar() {
    console.log('foo');
  }
}
const foo1 = new Foo;
const foo2 = new Foo;
const foo3 = new Foo;

console.log(Foo.getCount());