インスタンスの中身について

Question

質問

お世話になっております。質問は以下になります。

class Animal {
     constructor(){
     console.log("neko");
     }
}

const animal = new Animal();

クラスによって生成されるインスタンスについて疑問なのですが、
上記のようなコードがあった際に、インスタンスの中身というのは

let animal = {
 Animal:()=>{
 console.log("neko");
 }
}

この様に、
animalオブジェクトのなかにAnimalオブジェクトがあるということではないのでしょうか。
インスタンスの構造がどうなっているのかがわからないです。

試したこと

console.log(animal);でコンソールを確認しましたが、Animal{}となっておりました。

追記

animalというオブジェクトの中にAnimalというオブジェクトが入るのかと思っていたんですが、
あくまでもanimalという変数にAnimalオブジェクトがただ代入されているということでしょうか..?

オブジェクトを大量生成したいとき等にクラスを使うと習いましたが、そもそもオブジェクトとインスタンスというのは別物と捉えるべきでしょうか。

周りの方に同じような質問をしたところanimalオブジェクトの中にAnimalメソッドがあると思えといわれました。
腑に落ちなかった為、質問投稿に至っています。

Comments

[miyabi_pudding]

基本的なクラスとインスタンスの概念に対する疑問ということでしょうか？
（もっともJavaScriptはプロトタイプベースなので、クラスベースの概念では説明しきれない）

[..o]

生成されたインスタンスがどういった内容になっているのかが知りたい、としか言えないのですが、おかしな質問なのでしょうか？

[maisumakun]

「Animalというオブジェクト」とありますが、どのようなものを意図していますか？

[..o]

まず前提としてインスタンスはオブジェクトだと思っています。
animalオブジェクトの中にAnimalオブジェクトというconsole.log("neko");を実行するものが入っているのか、ということなのですが、これが間違っていること質問内容にあります二つ目のコード欄のコードで同じ挙動にはならないので、分かっています。
であればanimalの内容はどのようになっているのか、という事が知りたいです。

[miyabi_pudding]

> 周りの方に同じような質問をしたところanimalオブジェクトの中にAnimalメソッドがあると思えといわれました。

これ、誰が言ったか知りませんが、
勘違いしか生まない言い方ですね。
言葉が全然足らない　汗

[Lhankor_Mhy]

「animalオブジェクトの中にAnimalメソッドがあると思え」が、
「animalオブジェクトの中にAnimalのメソッドがあると思え」ならば、正確な表現ではないけど、アリな言い方だと思いました。初心者にプロトタイプチェーンとか教えても混乱するし……

Answer 1

animalオブジェクトのなかにAnimalオブジェクトがあるということではないのでしょうか。

違います。console.log("neko");はインスタンス作成時のみに実行されるコードです。

Comments

[maisumakun]

> animalの内容はどのようになっているのか

コンストラクタで何も書き込んでいない、かつプロトタイプの中身もなにもないので、表示の通り「空」です（ただし、Object.prototypeは引き継いでいます）。

[..o]

prototypeは引き継ぐのですね、長々とお付き合いありがとうございます。
助かりました。

Answer 2

animalオブジェクトのなかにAnimalオブジェクトがあるということではないのでしょうか。

違います。

JavaScriptは、プロトタイプベースのため、
animalオブジェクトは、
Animalオブジェクト（クラスではあるが、JavaScriptでは、クラスも即オブジェクトととなる = プロトタイプベースのため）
を雛形とした、新たなオブジェクト（インスタンス）です。

なので、両者は、同じ属性と、メソッドを持ち合わせますが、全くの別物になります。
animalの変化はAnimalには影響しませんし、逆も然りになります。

ただし、今回のように、newキーワードを使い、コンストラクタ（雛形）として呼び出した場合は、
Animal.prototype.hoge = () => 5などと、プロトタイプ自体に後に変更を加えると、
インスタンスであるanimalにも影響が出ます。

故に、

あくまでもanimalという変数にAnimalオブジェクトがただ代入されているということでしょうか..?

ではありません。
（ただの代入ではない）
ただの代入の場合、
const animal = Animal;
となり、雛形（クラス）とインスタンスの関係にはなりません。
（両者は同一のオブジェクトを指すことになるので、互いの状態変更が反映されてしまう）

Comments

[..o]

ありがとうございます。
違いがよく分かりました。ひとつひとつご指摘、解説いただきありがとうございます。

Answer 3

イメージ的にはこんな感じですかね

Comments

[yambejp]

class Animal{
constructor(){
this.neko();
}
neko(){
console.log('nya-');
}
}
const animal = new Animal();
animal.neko();

[yambejp]

function Animal(){
this.neko=function(){
console.log("nya-");
}
this.neko();
}
const animal = new Animal();
animal.neko();

[..o]

コードありがとうございます。
コンストラクタ関数とクラスの違いでしょうか？

[miyabi_pudding]

横槍失礼します。
いえ、記載方法の違いであって、
実は内部的には両者は同じなんです。
（コンソールで表示した時には表向きには違う表示にはなる）
JavaScriptの歴史や仕様変更が関わってくる話になります。

[..o]

ありがとうございます。
少し気になっていたところなのですが、コンストラクタ関数とクラスの使い分けがいまいちわからないのですが、内部的に同じなのであればどちらでも構わないという感じなのでしょうか？

[miyabi_pudding]

それは、別質問立てた方が良いかと思います。
本件と大きくは逸れませんが、
コメント返し返しだと、答えきれない内容になるかと思いますので。

[..o]

承知しました。ありがとうございます。

Answer 4

こんにちは。

class Animal {
     constructor(){
         // この中で登場する this が animal に代入されます。
         console.log("neko");
         // この中で this が登場しなかったので、{} を返します。
     }
}

const animal = new Animal(); // {} が返ります。（ただし、プロトタイプは継承しています）

Comments

[..o]

こんにちは。ありがとうございます。とても分かりやすいです、納得できました。