JavaScriptのprototypeがよくわからなくなった

Question

★ 質問

JavaScriptのプロトタイプチェーンについてはなんとなく理解しているつもりだったのですが、復習がてらに簡単なコードを書いてログを確認したら、Chromeのコンソールで出力される結果と、node環境で出力される結果が異なり、何が正しいのか混乱してしまいました。

以下に載せている最後の行でObject.getPrototypeOf(child)のログを出力しているのですが、childのprototypeはParentなのでしょうか？それとも、Childなのでしょうか？(質問1)

また、Object.getPrototypeOf(child)をtypeofで確認するとobjectと出るので、Constructor Functionではないのですよね？(質問2)

★ 書いたコード

//test.js

'use strict';

class Parent {
	constructor(name) {
		this.name = name;
	}
	greet1() {
		console.log('Hi, My name is ' + this.name + '.');
	}
}

class Child extends Parent {
	constructor(name, age) {
		super(name);
		this.age = age;
	}
	greet2() {
		console.log('Hi, My name is ' + this.name + '.');
		console.log('I am ' + this.age + ' years old.');
	}
}

const child = new Child('taro', 10);
console.log(Object.getPrototypeOf(child));

★ 最後の行のログ

Node

$ node test.js
> Child {} //最後の行のログ出力結果

Chrome

★　解決後の補足

以下の場合、どちらも出力結果はChromeコンソール上で{constructor: ƒ}となりました。

'use strict';

class Child1　{
	constructor(x){
		this.x = x;	
	}
}

const child1 = new Child1(5);

console.log(Object.getPrototypeOf(child1));


class Child2 extends function(){} {
	constructor(x){
		super();
		this.x = x;	
	}
}

const child2 = new Child2(5);

console.log(Object.getPrototypeOf(child2));

Answer 1

NOTE:
ややこしいので，間違いが有ったらごめんなさい.

---

以下に載せている最後の行でObject.getPrototypeOf(child)のログを出力しているのですが、childのprototypeはParentなのでしょうか？それとも、Childなのでしょうか？(質問1)

Child.prototypeです.

また、Object.getPrototypeOf(child)をtypeofで確認するとobjectと出るので、Constructor Functionではないのですよね？(質問2)

はい. 得られるのはプロトタイプオブジェクトです. そのオブジェクトを生成したコンストラクタがある場合は, constructorプロパティから取得できます.

---

あるコンストラクタとそのコンストラクタから生成されたオブジェクトとの間の関係性を表すプロパティには__proto__,prototype,constructorの3つがあります.

• obj.__proto__...このオブジェクトに対するプロトタイプオブジェクトを取得する
• Class.prototype...コンストラクタ実行時にプロトタイプオブジェクトとするオブジェクト
• obj.constructor...このオブジェクトを生成したコンストラクタ(クラス)

例えば次のようなコードが有った場合ログに出力される結果は全てtrueとなります.

{
	class Base{
		f(){return "base";}
	}
	class Extended extends Base{}

	const e = new Extended();
	console.log(e.constructor === Extended);
	console.log(e.__proto__ === Extended.prototype);
	console.log(Extended.prototype.constructor === Extended);
	console.log(e.__proto__.__proto__.constructor === Base);
	console.log(e.__proto__.__proto__ === Base.prototype);
	console.log(e.f());//継承できていることの確認
}

このコードをレガシーな継承で表すと次のようになります.

{
	function Base(){}
	Base.prototype.f = function(){return "base";}
	function Extended(){}
	Extended.prototype = new Base();
	Extended.prototype.constructor = Extended;

	const e = new Extended();
	console.log(e.constructor === Extended);
	console.log(e.__proto__ === Extended.prototype);
	console.log(Extended.prototype.constructor === Extended);
	console.log(e.__proto__.__proto__.constructor === Base);
	console.log(e.__proto__.__proto__ === Base.prototype);
	console.log(e.f());//継承できていることの確認
}

Comments

[murabito]

ありがとうございます。確かに冷静に考えればchild.__proto__はChild.prototypeでした。
ChromeのコンソールがそれをParent {}と出したり、node環境ではChildと出したりで混乱しましたが、おかげさまでクリアになりました。ChromeコンソールのParent {}のような表示はParentクラスのインスタンスであると読み替えてみれば良さそうですね。

Answer 2

childのprototypeはParentなのでしょうか？それとも、Childなのでしょうか？(質問1)

childにprototypeはありません。__proto__=内部プロパティ[[Prototype]]はあります。

Object.getPrototypeOf() メソッドは指定したオブジェクトのプロトタイプ (要するに内部プロパティ[[Prototype]] の値)を返します。

Object.getPrototypeOf() - JavaScript | MDN

Object.getPrototypeOf(child)をtypeofで確認するとobjectと出るので、Constructor Functionではないのですよね？(質問2)

はい、これは、Child.prototypeです。
Childがclass構文で定義されると、Child.prototypeが生成されます。その後、new演算子によりインスタンスが生成されると、child.__proto__がChild.prototypeと同じ参照を持ちます。


たぶん。

Comments

[Lhankor_Mhy]

解決してた。

[murabito]

ありがとうございます。参考になりました。