【JavaScript】クラス / オブジェクトメソッド - 生成するオブジェクトのメソッド

JavaScriptのクラスにおけるオブジェクトメソッドについて解説します。

検証環境

JavaScript -

macOS

14.1

クラス/オブジェクトメソッド

クラスに生成するオブジェクトのメソッドを定義できます。

メソッド構成が同じオブジェクトを簡潔に複数生成することが可能になります。

オブジェクトメソッドの定義

クラス定義のブロック内にメソッドを記述します。

基本構文

class クラス名 {
    メソッド名１( 仮引数１, 仮引数２ ... ) {
        // 処理........
    }
    メソッド名２( 仮引数１, 仮引数２ ... ) {
        // 処理........
    }
    ...
}

サンプル

sample.js

class Person {
    name;
    age;
    
    ___ih_hl_start
    info() {
        console.log("My name is " + this.name);
        console.log(this.age + " years old");
    }
    ___ih_hl_end
}

Console

定義のみでは、動作への影響はありません。

オブジェクトメソッドの呼び出し

クラスから生成したオブジェクトはクラスに定義したメソッドを所有します。

メソッドの呼び出しはクラスを使わないオブジェクトと同様にドット（.）記法で行います。

sample.js

class Person {
    name;
    age;
    
    info() {
        console.log("My name is " + this.name);
        console.log(this.age + " years old");
    }
}

let p1 = new Person();
p1.name = "TANAKA";
p1.age = 27;
___ih_hl_start
p1.info();
___ih_hl_end

let p2 = new Person();
p2.name = "SUZUKI";
p2.age = 21;
___ih_hl_start
p2.info();
___ih_hl_end

Console

My name is TANAKA
27 years old
My name is SUZUKI
21 years old

１４行目のp1.info()と１９行目のp2.info()がメソッドの呼び出しです。

いずれも正常にメソッドの処理を実行できており、オブジェクトがクラスに定義したメソッドを所有することが確認できます。