JavaScriptをやっている絵

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

__proto__ vs prototype

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

結論

proto は全てのオブジェクトが持つ、内部プロパティ。そのオブジェクト自体のprototypeへの参照を持つ。メソッドを解決させるためにチェインされている実際のオブジェクト
・prototypeはFunctionオブジェクトが持つプロパティ。コンストラクタ関数が持つオブジェクト。(関数なら全てが持っているプロパティ)

代入される動き

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

よって、
new というのは
[javascript]
function Hoge(){}//コンストラクタ
var hoge = new Hoge()
hoge.proto = Hoge.prototype;
[/javascript]
こうしているということです。

実際に試してみます
[javascript]
hoge.proto === Hoge.prototype
//true
[/javascript]

別の説明。

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

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

//以下は全てtrue
myPoint.proto == Point.prototype
myPoint.proto.proto == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;
[/javascript]

ここで
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