Zenn
😎

JavaScriptのClassについて

2023/02/25に公開
JavaScript
学習
メモ
class
es2022
tech

概要

JavaScriptのClassについて学んだことをメモとして残しておく。

Classについて

定義の仕方

//　クラス宣言
class Test {}

// クラス式（関数における匿名関数と似ている）
const Test = calss {}

インスタンス化

class Test{}
// インスタンス化
const newTest = new test()

// クラスのインスタンスかの判別方法
if(newTest instanceof Test) // => true

メソッド

class Test {
  constructor() {
    this.count = 0;
  }
  // `increment`メソッドをクラスに定義する
  increment() {
      // `this`は`Counter`のインスタンスを参照する
      this.count++;
  }
}

アクセッサプロパティの定義

class Test {
  constructor(value) {
        this.#value = value;
    }
    // `_value`プロパティの値を返すgetter
    get value() {
        console.log("getter");
        return this._value;
    }
    // `_value`プロパティに値を代入するsetter
    set value(newValue) {
        console.log("setter");
        this._value = newValue;
    }
}
  • #から始まるプロパティは、外から直接読み書きしてほしくないプロパティの前に#をつける

フィールド&メソッド

class Test {
  // クラスフィールド
  count = 0;
  
  // myPropertyはundefinedで初期化される
  myProperty;
  
  // 関数を代入することもできる
  up = () => {
    this.increment();
  }
  
  // privateなクラスフィールド、先頭に#をつける
  #privateField = 42;
  
  // 静的フィールド
  static static GREEN = "緑";
  
  // private静的フィールド
  static #privateClassProp = "This is private";
  
  constructor(arg){
    // インスタンスフィールド
    this.property = arg;
  }
  increment() {
    this.count++;
  }
  
  // インスタンスしなくても実行することができるメソッド
  static　test(){
    console.log("静的メソッド")
  }
}
  • classフィールドを定義する際は、constructorは不要。

継承

// 親クラス
class testParent {
    constructor(...args) {
        console.log("Parentコンストラクタの処理", ...args);
    }
}
// Parentを継承したChildクラスの定義
class TestChild extends testParent {
    constructor(...args) {
        // Parentのコンストラクタ処理を呼び出す
        super(...args);
        console.log("Childコンストラクタの処理", ...args);
    }
}
const child = new TestChild("引数1", "引数2");
// "Parentコンストラクタの処理", "引数1", "引数2"
// "Childコンストラクタの処理", "引数1", "引数2"

Discussion