【JavaScript】クラスからインスタンスとメソッドを生成するまで

#【JavaScript】クラスからインスタンスとメソッドを生成するまで

クラス、インスタンス、メソッドの意味、それぞれを生成する流れを整理しました。

##クラスとは
テンプレート、設計図。

##クラスの作り方

    class クラス名{
        constructor(){

        }
    };

・区別するためクラス名の先頭は大文字にする。
・オブジェクトを作るための初期化処理constructor(){}を入れる。
・constructor直後の記述内容は後述のインスタンス生成時に実行される。

    class Actor{
        constructor(){
        //インスタンス生成時に実行する処理
        }
    };

##インスタンス
クラス（テンプレート）から作り出したオブジェクト。

##インスタンスの作り方

    const インスタンス名(オブジェクト名) = new Actor（テンプレートになるクラス名）;

##インスタンスにプロパティと値を追加
インスタンスはクラスから作られたオブジェクト。
オブジェクトにはプロパティと値が必要。

constructor直後の記述内容は後述のインスタンス生成時に実行される機能を使い、"this.プロパティ名 = 値"で実装する。

    class クラス名{
        constructor(){
        this.プロパティ名 = 値;
        }
    };

例.クラス名Actorをテンプレートに、プロパティにhpとnameを持つインスタンス名actorを作る場合

    class Actor{
        constructor(){
        this.name = "aaa";
        this.hp = 123;
        }
    }

    const actor = new Actor();

この段階でインスタンスactorの中にはhp:123のname:aaaが存在するため、次のように指定した表示が可能。

    console.log(actor.name);//aaa
    console.log(actor.hp);//123

##インスタンス生成時に引数を渡す

次の2点でインスタンス生成時に引数を渡すことができる
・constructor()に引数を記述
・インスタンス生成時のnew クラス名()に引数を記述

さきほどの例だとname:aaa,hp:123人しか表示できなかったが、引数にすることで自由にnameとhpを追加できる。

    class Actor{
        constructor(name,hp){　　　　　　　　//引数にname,hpを指定
        this.name = name;　　　　　　　　　　//引数nameの値を出力
        this.hp = hp;　　　　　　　　　　　　//引数hpの値を出力
        }
    }
    const actor = new Actor("bbb",999);　　//hp999のbbbさん
    
    console.log(actor.name);//bbb
    console.log(actor.hp);//999

##メソッド

クラスの中で実行する処理をまとめたもの。
例えるなら、オブジェクトが住所録なら、メソッドは住所録の使い方。

##メソッドの作り方
    class クラス名{
        constructor(){
        }

        メソッド名(){
            処理内容;
        }
    }

先ほどの流れで
・Actorクラスを使いアクターの名前とHPを表示させるactorインスタンスを生成
・引数で与えた名前とhpを表示させるshowメソッド
を作る場合

    class Actor{
        constructor(name,hp){
        this.name = name;
        this.hp = hp;
        }

        show(){
            console.log(this.name);　//(actor.name)を(this.name)に
            console.log(this.hp);　　//(actor.hp)を(this.hp)に
        }
    }

ここまでで準備が完了。
次はクラスActorからhp999,名前bbbを登録したインスタンスactorを作り、actorのshowメソッド=actor.show()で表示させる

    const actor = new Actor("bbb",999);
    actor.show();

実行結果

    bbb
    999

showメソッドの表示内容をわかりやすく。

    class Actor{
        constructor(name,hp){
        this.name = name;
        this.hp = hp;
        }

        show(){
            console.log(`アクター名:${this.name},HP:${this.hp}`);
        }
    }

実行結果

    アクター名:bbb,HP:999

##RPGツクールのクラス
RPGツクールMVではES6以前のFunctionベースで記述されている。

参考：(初心者向け) JavaScript のクラス (ES6 対応)
https://qiita.com/tadnakam/items/ae8e0e95107e1427983f

Game_Actorクラス（3388行目）
Game_Actorという入れ物と実行内容を作って、

    function Game_Actor() {
        this.initialize.apply(this, arguments);
    }

Game_Actor.prototypeというオブジェクトを生成する処理を作って、
constructor＝インスタンス生成時の処理をGame_Actorに指定して

    Game_Actor.prototype = Object.create(Game_Battler.prototype);
    Game_Actor.prototype.constructor = Game_Actor;

Game_Actor.prototype.setupではアクターID、名前などデータベースに対応したオブジェクトが作られている。
これはインスタンス内の処理なのだろう。

    Game_Actor.prototype.setup = function(actorId) {
        var actor = $dataActors[actorId];
        this._actorId = actorId;
        this._name = actor.name;
        this._nickname = actor.nickname;
        this._profile = actor.profile;
        this._classId = actor.classId;
        this._level = actor.initialLevel;
        this.initImages();
        this.initExp();
        this.initSkills();
        this.initEquips(actor.equips);
        this.clearParamPlus();
        this.recoverAll();
    };

オブジェクトに対応するメソッドらしき処理（オブジェクトの定義が終わり、returnが始まる箇所）が3448行目のGame_Actor.prototype.actorId以降。

    Game_Actor.prototype.actorId = function() {
        return this._actorId;
    };

    Game_Actor.prototype.equips = function() {
        return this._equips.map(function(item) {
            return item.object();
        });
    };

クラス→インスタンスで範囲を決めて管理。
オブジェクトにデータを格納し必要に応じてメソッドを呼び出して処理している。

改造したい場合は目的にあわせて、メソッドやオブジェクトを探し、該当部分のクラスやインスタンスをプラグインで囲い、処理するのでしょう。
大雑把ですが全体像を見ることができたと思います。
誤っている箇所がありましたら、ご指摘頂けますと幸いです。