Skip to content

Instantly share code, notes, and snippets.

@kenmori
Last active September 23, 2020 01:34
Show Gist options
  • Save kenmori/f497905184e315101869a8bf9836b901 to your computer and use it in GitHub Desktop.
Save kenmori/f497905184e315101869a8bf9836b901 to your computer and use it in GitHub Desktop.
prototypeと__proto__の違い

問350

prototype と __proto__ の違いを説明してください

・prototype・・・Functionオブジェクトだけがもつプロパティ。参照先はオブジェクト。

・__proto__・・・全てのオブジェクトが持つ内部プロパティ。プロトタイプチェーン。暗黙の参照(自身のプロパティになければこの__proto__先を辿ること)を実現する内部で実装されているプロパティ。

newして生成されたインスタンスの__proto__にコンストラクタのprototypeオブジェクトが代入される


function F(){
  this.name = '';//1
}
F.prototype.y = function(){} //2

let f = new F(); //f.__proto__ = F.prototype //

f.__proto__ === F.prototype

//true


F自体の__proto__には空の関数が入っている
F.__proto__
//function () { [native code] }


//yが自身のpropertyかどうかチェック
F.hasOwnProperty('y')
//false
F.prototype.hasOwnProperty('y') //2でprototypeに代入しているため
//true

//newした結果、インスタンスfは自身の参照リンクを辿った先のprototypeオブジェクトが持つyを見ることができる
f.y === f.__proto__.y
//true

f.hasOwnProperty('y') //f自身はyを持たない
//false
f.hasOwnProperty('name') //自身にnameをもつ //2
//true


//Array
var arry = [];
arry.__proto__ === Array.prototype
//true
arry.__proto__ === [].__proto__
//true
arry.hasOwnProperty('pop') //参照リンク先のオブジェクトprototypeが持つメソッド
//false


//more
//こちらのコンストラクタが実行された際に何が起きているか
function A (name){
 this.name = name;
}

//Aのプロパティにprototypeが追加される
//prototypeプロパティはオブジェクトで、以下の2つのプロパティをもつ

//constructor
//__proto__


A.prototype
//constructor:function a(name)
//__proto__:Object

constructorは何もないがそれ自体内部に__proto__を持ち、その参照先はJavaScriptのルートオブジェクトであるObject。

//Aをnewした時に何が起きるか

let b = new A('JavaScript');
//4つのことが起こる
//1.新しい空のオブジェクト{}が生成される
//2.b上に__proto__が作られ、それはA.prototypeを参照するようになる。なのでb.__proto__ === A.prototype

調査中
-//3.上記1で生成されたオブジェクトをthisコンテキストとして、A.prototype.constructorを実行します。したがってnameプロパティは新しく作成されたオブジェクトに追加されます。-
//4.作成されたオブジェクトを返します。let bは新しいオブジェクトが割り当てられます。

//もしA.prototype.car = 'BMW'として、b.carとすると" BMW"をアウトプットします
//JavaScriptはb上のプロパティcarを探し、見つからなければ上記2で作成されたb.__proto__(A.prototype)を参照し、A.prototypeにあるcarプロパティ値を返すためです。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment