JavaScriptをやっている絵

なるほど。。__proto__とprototypeの違い

__proto__ vs prototype

なるほど。。protoとprototypeの違い
これはECMAScript2015やTypeScriptでもトランスパイル、コンパイルされた JS上、理解したいオブジェクトなので徹底的にやろうと思いました。

結論

proto は全てのオブジェクトが持つ、内部プロパティ。[[prototype]]と表現されている箇所

その作られたオブジェクトの元のオブジェクトのprototypeへの参照を持つ。
メソッドを解決させるためにチェインされている実際のオブジェクト

・prototypeはFunctionオブジェクトが持つプロパティ。コンストラクタ関数が持つオブジェクト。(関数なら全てが持っているプロパティ)

参照が割り当てられる動き

・prototypeはnewで初期化された時、そのコンストラクタ関数が持つprototypeをインスタンスのproto.上に参照が割り当てられます
(→なのでインスタンスが直接持つのはprotoであって、protypeを持ちません)

よって、
new というのは

function Hoge(){}//コンストラクタ
let hoge = new Hoge()
hoge.__proto__ = Hoge.prototype;

こうしているということです。

実際に試してみます

hoge.__proto__ === Hoge.prototype
//true

別の説明。

//コンストラクタ
function Point(x, y) {
    this.x = x;
    this.y = y;
}

//初期化
let myPoint = new Point();

//以下は全てtrue
myPoint.__proto__ === Point.prototype
myPoint.__proto__.__proto__ === Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

ここで
newすると同時に
Point.prototype上のものが
インスタンスである
myPoint.proto上に参照が割り当てられる。

参照

https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript

Object.prototype.proto
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto