コンストラクター関数とインスタンス 初心者による初心者向けの説明

コンスタラクター関数とは

コンストラクター関数は、新しくオブジェクトを作成するための雛形となる関数のこと。

雛形をつくります

コンストラクター関数を定義します。
慣例的にコンストラクター関数名は他の関数名と見分けがつきやすいように、一文字目を大文字とします。

例えば、名前、HP、攻撃力、必殺技を持つキャラクターを複数生成したい!
そんなとき、まず雛形となるコンストラクター関数を定義していきます。

function Caracter(name, hp, atk, skills) {
    this.name = name;
    this.hp = hp;
    this.atk = atk;
    this.skill = skills;
}

雛形ができたら次はインスタンス化（雛形から実物・実体を製造）します。

インスタンス化とは

new演算子をつけてコンスタラクター関数を実行し新たなオブジェクトを作成することをインスタンス化といいます。
作成されたオブジェクトをインスタンス（実物・実体）と表現します。

作成した雛形をもとにキャラクターを生成します

さきほど定義したコンストラクター関数をnew演算子を頭につけて実行し、インスタンスを作成してみます。

const harryd = new Caracter('ハリード', 850, 40, '黄龍剣');
const boston = new Caracter('ボストン', 800, 50, 'タイガーブレイク');

強そうなキャラクターが作成されました

console.log(harryd);
//log >>> Caracter {name: "ハリード", hp: 850, atk: 40, skill: "黄龍剣"}
console.log(boston);
//log >>> Caracter {name: "ボストン", hp: 800, atk: 50, skill: "タイガーブレイク"}

強そうですね。

私はハリードが大好きで、銀の手装備による通常攻撃＋黄龍剣をかすみ黄龍剣！とか命名して楽しくやっていました。
ロマンシングなゲームでしたね。

また、複数の必殺技を持たせたい場合はskillsを別のオブジェクトで管理させて、変数名で指定してあげることもできます。

const skills = {
    oneHandSword: [
        '黄龍剣',
        'デミルーンエコー',
        '分身剣'
    ],
    taijutsu: [
        'タイガーブレイク',
        '錬気拳',
        '龍神烈火拳'
    ]
}

const harryd = new Caracter('ハリード', 250, 100, [skills.oneHandSord]);
//log >>> Caracter {name: "ハリード", hp: 250, atk: 100, skill: Array(1)}
//Arrayの中身 >>> ["黄龍剣", "デミルーンエコー", "分身剣"]

const boston = new Caracter('ボストン', 350, 120, [skills.taijutsu]);
//log >>> Caracter {name: "ボストン", hp: 350, atk: 120, skill: Array(1)}
//Arrayの中身 >>> ["タイガーブレイク", "錬気拳", "龍神烈火拳"]

プロトタイプを参照する

newで作成されたインスタンスは大元の設計である雛形を参照している状態ですので、雛形（コンストラクター関数の定義）内のデータを変えるとすべて変更されます。

例えば、キャラクター名を’さん’付けで呼ばせたかった〜(;_;)
と後からなった場合...

function Caracter(name, hp, atk, skills) {
    this.name = name + 'さん';
    this.hp = hp;
    this.atk = atk;
    this.skill = skills;
}

const harryd = new Caracter('ハリード', 250, 100, [skills.oneHandSord]);
// log >>> Caracter {name: "ハリードさん", hp: 250, atk: 100, skill: Array(1)}

const boston = new Caracter('ボストン', 350, 120, [skills.taijutsu]);
//log >>> Caracter {name: "ボストンさん", hp: 350, atk: 120, skill: Array(1)}

キャラクター１体ずつさん付けにする必要はなく、大元の雛形に変更を加えることで作成したインスタンスすべてに反映されます。

conslole.logで中身をみていくと __ proto __ というプロパティがみつかりますが、これが大元を参照していますよーってことみたいですね。

ここの理解度はまだ低めで上手いこと言語化できません(;_;)
なんとなく掴んでいる程度だとおそらくこんなもんです。
javaScriptのオブジェクトはprototypeで繋がっているんだよ！という概念を持つことが重要だと思います！

まとめ

• コンストラクター関数はオブジェクトを生成する為の関数
• this＋プロパティ名を記述し、引数からプロパティを設定する
• new演算子をつかってインスタンス化を行う
• 作成されたオブジェクトをインスタンスと呼ぶ
• prototypeを参照する

コード全体

function Caracter(name, hp, atk, skills) {
    this.name = name + 'さん';
    this.hp = hp;
    this.atk = atk;
    this.skill = skills;
}

const skills = {
    oneHandSword: [
        '黄龍剣',
        'デミルーンエコー',
        '分身剣'
    ],
    taijutsu: [
        'タイガーブレイク',
        '錬気拳',
        '龍神烈火拳'
    ]
}

const harryd = new Caracter('ハリード', 250, 100, [skills.oneHandSword]);
const boston = new Caracter('ボストン', 350, 120, [skills.taijutsu]);

console.log(harryd);
console.log(boston);