JavaScriptはクラスをベースとした他のオブジェクト指向言語と違い、プロトタイプベースのオブジェクト指向言語と言って、JavaScriptのprototypeを解説している記事がありました。
【JavaScript入門】プロトタイプ(prototype)の使い方と継承まとめ!※SAMURAIエンジニアブログ※
各種プログラミング言語を学んでいく過程で、JavaScriptのprototypeで躓きましたが、この文言を見て、どうしてもこだわっておきたい気持ちが強まりました。
勿論、知り合いのエンジニアからも、その後のES6への移行で、JavaScriptにもクラスが実装されたことから、基本シンタックスシュガーであるクラス表記にてコーディングが行われることも伺っており、早めにクラス表記に対する学習を進めた方が良いということは分かりますが、是非、理解しておきたい内容ですので、質問させてください。
首題の通り、インスタンスはprototypeを持つのか?持たないのか?という点です。
この疑問に合わせて、その後に考察が続く、次のようなソースコードを作成しております。
■ソースコード■
function Fn(name, age) {
this.name = name;
this.age = age;
}
Fn.prototype.c = function() {
console.log('c is called');
}
const tom = new Fn('Tom', 18);
// Fn.c(); -- コンストラクター関数に直接cメソッドを実行してもエラー。
console.log('======Fn.prototype.c();======');
Fn.prototype.c();
console.log('======tom.c();======');
tom.c();
console.log('★★★★★★tom.__proto__.cメソッド変更★★★★★★');
tom.__proto__.c = function() {
console.log('changed c is called');
}
console.log('======Fn.prototype.c();cメソッド変更後======');
Fn.prototype.c();
console.log('======tom.c();cメソッド変更後======');
tom.c();
const jason = new Fn('Jason', 21);
console.log('======jason.c();cメソッド変更後======');
jason.c();
// jason.d(); -- dメソッド追加前に、インスタンスを呼び出してもエラー。
console.log('★★★★★★tom.__proto__.dメソッド追加★★★★★★')
tom.__proto__.d = function() {
console.log('d is called');
}
console.log('======Fn.prototype.c();dメソッド追加後======');
Fn.prototype.d();
console.log('======tom.c();dメソッド追加後======');
tom.d();
console.log('======jason.d();dメソッド追加後======');
jason.d();
console.log('★★★★★★tom.__proto__.cメソッド変更2回目★★★★★★');
Fn.prototype.c = function() {
console.log('second changed c is called');
}
console.log('======Fn.prototype.c();cメソッド2回目変更後======');
Fn.prototype.c();
console.log('======tom.c();cメソッド2回目変更後======');
tom.c();
console.log('======jason.c();cメソッド2回目変更後======');
jason.c();
実行結果は次のようになります。
■実行結果■
======Fn.prototype.c();======
main.js:6 c is called
main.js:12 ======tom.c();======
main.js:6 c is called
main.js:14 ★★★★★★tom.__proto__.cメソッド変更★★★★★★
main.js:18 ======Fn.prototype.c();cメソッド変更後======
main.js:16 changed c is called ←◆1
main.js:20 ======tom.c();cメソッド変更後======
main.js:16 changed c is called ←◆1
main.js:23 ======jason.c();cメソッド変更後======
main.js:16 changed c is called ←◆1
main.js:26 ★★★★★★tom.__proto__.dメソッド追加★★★★★★
main.js:30 ======Fn.prototype.c();dメソッド追加後======
main.js:28 d is called ←◆2
main.js:32 ======tom.c();dメソッド追加後======
main.js:28 d is called ←◆2
main.js:34 ======jason.d();dメソッド追加後======
main.js:28 d is called ←◆2
main.js:36 ★★★★★★tom.__proto__.cメソッド変更2回目★★★★★★
main.js:40 ======Fn.prototype.c();cメソッド2回目変更後======
main.js:38 second changed c is called ←◆3
main.js:42 ======tom.c();cメソッド2回目変更後======
main.js:38 second changed c is called ←◆3
main.js:44 ======jason.c();cメソッド2回目変更後======
main.js:38 second changed c is called ←◆3
これを受け、次のようなことが言えます。
インスタンスの親であるコンストラクター関数のprototypeに追加したメソッドを、そのprototypeのリンクである__proto__経由でインスタンスで変更したところ、親ともう一つの子であるインスタンスにも影響がありました。(【実行結果】◆1)
また、コンストラクター関数のprototypeへのリンクである__proto__を用いてインスタンスでメソッドを追加したところ、親であるコンストラクター関数のprototypeと、もう一つの子であるインスタンスにも、追加したメソッドが有効でした。(【実行結果】◆2)
また、親であるコンストラクター関数のprototypeを通して、メソッドを変更したところ、それはしっかり、子であるインスタンスにも反映されました。(【実行結果】◆3)(念のため確認)
そもそも、私の方で次のような疑問を抱いておりました。
javascript文法-インスタンスに対するprototypeの位置づけ
ここで得られた知見により、ご回答者様から頂いたご回答を受け、非推奨なやり方であることは承知の上、インスタンスのprototypeへのアクセスは、__proto__で行うものという認識で、上記の方法を取りました。
また、そもそも、この方法については「prototypeの影響範囲がプロトタイプチェーンに及ばないオブジェクト単独かどうかに関わる処理内容である」というものなのか?という疑問がありましたが、そうでなく、プロトタイプチェーン全範囲に影響を及ぼすものであるという解釈が出来るものと分かりました。
ここで躓くのが、前出の質問に載せてあるChatGPTからの回答です。
対象となるソースコードは次のソースコードです。
■ソースコード■
function Fn4(a, b) {
this.a = a;
this.b = b;
}
/* prototypeに引き込みたい関数オブジェクトproto_method */
function proto_method() {
console.log("proto method is called");
}
/* ■コンストラクター関数オブジェクトのインスタンス化■ */
const fn4 = new Fn4();
/* ★4.コンストラクター関数Fn4のインスタンスfn4のprototypeにメソッドdを設定★ */
fn4.prototype.d = function() {
console.log("method d is called");
}
console.log('-----★method execution trial 4★-----')
fn4.d();
■ChatGPT回答■
1.インスタンスに対してprototypeを使用してメソッドを設定する:fn4.prototype.dというコードでは、fn4はインスタンスであり、インスタンス自体にはprototypeプロパティが存在しません。正しい方法は、コンストラクター関数Fn4のプロトタイプに対してメソッドを設定することです。
2.メソッド呼び出しの誤り:fn4.d()というコードは、fn4はインスタンスであり、d()メソッドはプロトタイプに追加されているため、直接インスタンスから呼び出すことはできません。
追って質問:Google ChromeのConsoleで確認すると、インスタンスにも[[Prototype]]という属性が出力されますが、「インスタンス自体にはprototypeプロパティが存在しません。」とはどういう意味ですか?
申し訳ありません、誤った情報を提供しました。インスタンスも実際にはプロトタイプを持ち、[[Prototype]]と呼ばれる内部プロパティでプロトタイプオブジェクトへのリンクを保持しています。したがって、インスタンス自体にはプロトタイプへのリンクが存在します。
[[Prototype]]はJavaScriptの内部的なプロパティであり、通常のコードからは直接アクセスすることができません。しかし、いくつかの環境やツール(たとえば、Google ChromeのConsoleなど)では、[[Prototype]]を表示することができる場合があります。
正しい情報としては、インスタンスはプロトタイプを持ち、通常はプロトタイプチェーンを通じてそのプロトタイプのメソッドやプロパティにアクセスできます。インスタンスが直接prototypeプロパティを持っているわけではありませんが、[[Prototype]]を介してプロトタイプにアクセスできる仕組みです。
※尚、ここで言われている、「fn4.d()というコードは、fn4はインスタンスであり、d()メソッドはプロトタイプに追加されているため、直接インスタンスから呼び出すことはできません。」につきましては、__proto__経由で、d()メソッドを追加することで解消されました。
function Fn4(a, b) {
this.a = a;
this.b = b;
}
/* prototypeに引き込みたい関数オブジェクトproto_method */
function proto_method() {
console.log("proto method is called");
}
/* ■コンストラクター関数オブジェクトのインスタンス化■ */
const fn4 = new Fn4();
/* ★4.コンストラクター関数Fn4のインスタンスfn4のprototypeにメソッドdを設定★ */
fn4.__proto__.d = function() {
console.log("method d is called");
}
console.log('-----★method execution trial 4★-----')
fn4.d();
ここで、ChatGPTは、
①インスタンス自体にはprototypeプロパティが存在しません。
②正しい情報としては、インスタンスはプロトタイプを持ち、
③インスタンスが直接prototypeプロパティを持っているわけではありません
と言っています。
そこで、prototypeには、実体とリンクがあるという認識で解釈を行っていましたが、本件の冒頭のソースコードでは、リンクから実体の情報を操作できてしまいました。
つまり、実体の情報を参照する機能だけのリンクではないと分かりました。
以上のことから、
コンストラクター関数のインスタンスは、結局プロトタイプを持つのでしょうか?持たないのでしょうか?
(プロトタイプには、prototypeと__proto__と[[Prototype]]がありますので、ここでは、ChatGPTが言わんとする"プロトタイプ"のことを指したい為、抽象化して"プロトタイプ"としています。)
参照:[[prototype]]とprototypeと__proto__について
今回の現象については、リンクを通じて、実体の操作も行えたという理屈が成り立つとは考えています。
以上を踏まえまして、明瞭なご回答はありませんでしょうか?
以上、
宜しくお願い致します。
prototype
と__proto__
と[[Prototype]]
は全く違うものだと認識しているようにも見えます。結局、あなたが「持っているかどうか」か聞いている【タイトルではprototypeと表記し、質問文ではプロトタイプと表記しているもの】は一体何を指すのでしょうか?それとも、どれか一つではなく、この三つそれぞれについて持っているかどうかを聞いているのでしょうか?