フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集261問(脱初心者へ)2016/09/10更新

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

__proto__ vs prototype

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

結論

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

代入される動き

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

よって、
new というのは

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

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

実際に試してみます

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

別の説明。

//コンストラクタ
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;

ここで
newすると同時に
Point.prototype上のものが
インスタンスである
myPoint.__proto__に保存され、以降、参照できることに注意してください。

参照

http://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

(Visited 1 times, 1 visits today)