본문 바로가기

JavaScript

Prototype, instance , __proto__, Prototype Chain

- Prototype
기초 / 표준

 

프로토타입이란 ?
함수가 생성될 시 동시에 프로토타입이라는 객체가 생성된다.
프로토타입엔 그 함수의 기능과 , 속성들이 들어있다

 

 

객체(object)는 함수(function)로부터 시작된다
//자바스크립트가 실제 실행하는건, 함수를 실행

 

배열, 객체, 함수 => 함수로 만들어짐

// ex) new Array(), new Object()

 

객체 => 함수를 실행한것 

// new Object 생성자 함수를 실행한것


ex) var a = ["거북"];
var a = new Array("거북");

ex) function foo() {} => var foo = new Function()
foo라는 함수를 선언한것은, new Function 생성자 함수를 사용한것과 같음

 

모든 객체는 Object 객체의 프로토타입 기반으로 확장
생성자 함수 => 함수 => 객체 => key ,value를 가짐

 



생성자함수 , 프로토타입 관계
Constructor , Prototype
남편 , 아내
Object , Object.Prototype
Object.prototype.constructor , Object.prototype.constructor.prototype



instance
생성자 함수 (new 키워드)를 통해서 새로운 객체를 만들어냄
ex) var arr = new Array("거북");

 

instance는 객체원형의 prototype Object 사용 가능
//arr 변수는 Object.protoype 사용 가능
이를 prototype chanin 이라고 부름

https://webclub.tistory.com/380


__proto__ 

Prototype Link
객체를 생성하는데 쓰인 생성자 함수의 prototype Object에

접근할 수 있도록 해주는 연결고리

ex)

function A() {}
 var a= new A ();
//a 의 __proto__  : 생성자 함수 A 의 prototype Object

 


Prototype Chain
__proto__ : property(속성) 통해 자신의 생성에 관여한 함수 (생성자함수)의

Prototype object에서 속성을 찾는다.

 


객체의 property 사용시 해당 property가 없다면?
//instance에 property 값이 없으면 ?

 

프로토타입 체인을 이용해서 상위 prototype object에서 값을 찾는다.

//instance prototype object  => 생성자함수 prototype object  => Object prototype object (최상위)
=> 값이 있으면 값 반환 , 없다면 undefined

 


ex) A함수 (생성자 함수) 의 __proto__ 는 무엇인지 ?
A.__proto__ => Function prototype Object
A.__proto__.__proto__ => Object prototype object (최상위)
A.__proto__.__proto__.__proto__ => null



참조 블로그

https://jongmin92.github.io/2017/03/14/JavaScript/understand-prototype/


https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

http://insanehong.kr/post/javascript-prototype/?source=post_page-----f8e67c286b67----------------------

 

 

 

'JavaScript' 카테고리의 다른 글

event delegation, 버블링, 캡쳐링  (0) 2019.10.12
HTTP, JSON ,AJAX  (0) 2019.10.04
this  (0) 2019.09.21
문자열,숫자열 변환하기  (0) 2019.09.14
이벤트핸들러 1회 적용 후 제거  (0) 2019.09.11