0

次のソースコードは何故、上手くいかないのでしょうか?
■ソースコード■

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();

例えば、最後にconsole.log(fn4);を行うと次のようにGoogle Chromeの検証>consoleにて、[[Prototype]]が存在しています。
■結果■:console.log(fn4);
画像の説明をここに入力

この件について、ChatGPT3.5で問い合わせたところ、次のような回答が得られています。

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]]を介してプロトタイプにアクセスできる仕組みです。

コンストラクター関数のprototypeを次のソースコードのように操作してメソッドを追加するスタンダードなやり方と同様に、インスタンスのprototypeは操作できないんですか?
それは何故でしょうか?
chatGPTの説明はどれ位合っていますか?

■ソースコード■

function Fn1(a, b) {
  this.a = a;
  this.b = b;
}

/* ★1.コンストラクター関数Fn1のprototypeにメソッドcを設定★ */
Fn1.prototype.c = function () {
  console.log("method c is called");
};

/* ■コンストラクター関数オブジェクトのインスタンス化■ */
const fn1 = new Fn1();

console.log('-----★method execution trial 1★-----')
console.log('Fn1.prototype.c();')
Fn1.prototype.c();
console.log('fn1.c();')
fn1.c();

console.log(fn1);のGoogle Chromeの検証>consoleでの結果は次の通りです。

■結果■:console.log(fn1);
画像の説明をここに入力

また、次のやり方も出来ません。

■ソースコード■

function Fn6(a, b) {
  this.a = a;
  this.b = b;
}

/* ■コンストラクター関数オブジェクトのインスタンス化■ */
const fn6 = new Fn6();

/* ★6.コンストラクター関数Fn6のインスタンスfn6のprototypeにコンストラクター関数Fn1のインスタンスfn1のprototypeを設定★ */
Object.setPrototypeOf(fn6, fn1.prototype);

console.log('-----★method execution trial 6★-----')
fn6.c();

こちらも、インスタンスのprototypeに対しての理解が成り立っていない為、起こるエラーと考えています。
タイトルに戻りますが、インスタンスのprototypeの位置づけは以上についてどのようになっているのでしょうか?

よろしくお願い致します。

1 件の回答 1

2

だいたい ChatGPT の通りで、インスタンスから prototype というプロパティでプロトタイプにアクセスすることはできません。
コンソールでは [[Prototype]] と表示されますが、Object.getPrototypeOf(fn4)fn4.__proto__ でアクセスすることができます。

3
  • 早速、ご回答頂き、ありがとうございます。 ご回答頂いた内容を受け、 fn4.__proto__.d = function() { console.log("method d is called"); } とすると、インスタンスのprototypeにアクセスでき、メソッドがfn4.d();で実行できましたが、これについてはどのような見解がございますでしょうか?非推奨でしょうか? ご教示頂けますと幸いです。宜しくお願い致します。 Commented 2023年8月9日 9:22
  • __proto__ は ECMAScript 標準で定義されてはいますが、歴史的事情で定義されただけで Object.getProrotypeOf() の方がマシだろうと感じます。 業界的な雰囲気ではプロトタイプ操作そのものが避けるべきで、可能な限り class 構文で済ませる方向です。
    – int32_t
    Commented 2023年8月9日 15:52
  • ご回答ありがとうございます。 ニュアンスが違うかもしれませんが、JavaScriptでの語源的意味でのデファクトスタンダードをうかがい知ることが出来、大変勉強になります。 文法の決まりだけでは収まらない背景となる事情をご教示くださり、誠にありがとうございます。この1件だけでもJavaScriptを学習する上での理解が大変深まりました。ありがとうございました。 Commented 2023年8月9日 16:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。