はじめに
本記事は 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になります。
まとめ
今回はコンストラクタ関数、インスタンス化、prototypeの参照を確認しました。
- 参照に関する記事