はじめに

本記事は Udemy著者『 CodeMafia 』様の「【JS】ガチで学びたい人のためのJavaScriptメカニズム」 の内容を参考にしています。
JavaScriptの基礎的な文法から応用的な使用例まで備忘録・復習を兼ねて記事にしていこうと思います。
特にUdemy「【JS】ガチで学びたい人のためのJavaScriptメカニズム」の質問内容に目を通しています。Jsの学習を共に解決していけたら幸いです。
その他のQuiitaの記事やMDNの構文は積極的に引用しようと思います。

この記事の対象読者

Javascript入門者
Class構文を理解したい
prototype という"特別"なオブジェクトについてデバックしながら理解したい。
JavaScriptの[参照]について確認したい。

コードから追っていきます

//1.コンストラクター関数を定義します
function Cat(name, age) {
    this.name = name;
    this.age = age;
}

//2. new演算子でインスタンス化します。引数は任意です。
const tama = new Cat('tama',12);

//3.tamaの情報をコンソールで見ます。
console.log(tama); //Cat {name: 'tama', age: 12}

次にCatから生成されるインスタンスにメソッドを付与していきます。
今回は、tamaに「ニャアと言ってもらいます」
JavaScriptでは「関数もオブジェクト」ですので.記法でprototypeオブジェクトを繋げてかけます。

//1.Catのprototypeというオブジェクトにアクセス。
//2.使用したいメソッドを追加できる「.shout()」、無名関数を代入して処理を書き込こむ。
Cat.prototype.shout = function () {
    console.log(this);//このthisはCatなので
    console.log(`${this.name} say ニャア`);//3.変数は「this.name」を使用。
}
tama.shout(); //=>  tama say ニャア

次に「protype.メソッドで設定した関数の状態(参照)」がどうなっているのかを調べるために、新たなインスタンスをCatから生成してみます。

mikeというインスタンスをCatから生成し、メソッドを呼び出してみます。

const mike = new Cat('mike',12);
mike.shout(); //=> mike say ニャア

さて、このメソッドはなぜ使えるのかと思わないでしょうか？

現在のコンソールの中身を見ればわかります。

consoleにtamaと打ってenter

Cat {name: 'tama', age: 12}
age: 12
name: "tama"
[[Prototype]]: Object  //=>>ここのPrototypeの中のshout：f（）をCatから生成した
                       //他のインスタンスも参照しできる
shout: ƒ ()
constructor: ƒ Cat(name, age)
[[Prototype]]: Object

ことに起因します。


Cat.prototype.shout = function () {
    console.log(`${this.name} say ニャア`);
}

つまり、この式の「追加されたshoutメソッド(左辺)」が「(右辺の)functionを参照」しているので、Catから生成された他のオブジェクトでも

[[Prototype]]: Objectを介して、メソッド参照できるという仕組みになっています。

参照のコピーに関して

ちなみに[[Prototype]]というのはCat.prototypeの参照のコピーになるので、実体のオブジェクトは一致します。
コードでそれを証明すると以下のようになります。

console.log(Object.getPrototypeOf(tama) === Cat.prototype);
console.log(Object.getPrototypeOf(mike) === Cat.prototype);

これらはどちらもtrueになります。

Object.getPrototypeOf():MDN

まとめ

今回はコンストラクタ関数、インスタンス化、prototypeの参照を確認しました。

参照に関する記事