비실이의 개발 성장기

javascript 프로토타입(prototype) 이란? 본문

프론트엔드/javascript

javascript 프로토타입(prototype) 이란?

DubbingLee 2017. 4. 2. 18:44

 

1. 프로토타입 (prototype) 이란?

- prototype 의 우리말은  `원형` 입니다.

- javascript 에서도 객체의 원형을 prototype 이라고 부릅니다.

 

 

2. javascript 프로토타입

-  javascript 에서 모든 객체는 프로토타입을 가지고 있습니다.

 

Person() 생성자함수를 console.dir 로 출력한 결과

 

Person 생성자 함수를 생성한 뒤, console.dir 로 확인해 보니 

 

prototype 프로퍼티와 __proto__ 프로퍼티가 생성된 것을 확인할 수 있었습니다. 

 

(나머지 프로퍼티는 현재 글의 의도와 관계가 없으므로 생략 하겠습니다.)

 

 

 

prototype 프로퍼티 자기 자신(Person) 의 원형 이며, 일반적으로 프로토타입 이라고 부릅니다.

 

__proto__자기 자신(Person) 의 상위 객체의 prototype 을 가리키는 은닉 속성(private property) 입니다.

 

이를 프로토타입 링크라고 부릅니다.

(ECMA script에서는 [[Prototype]] , 크롬 브라우저 에서는 __proto__ 로 표현되며 두개는 같은 의미) 

 

Person 생성자 함수의 상위 객체는 Function 객체입니다.

 

그러므로 Person 생성자 함수의 프로토타입 링크는 Function.prototype 을 가리키게 됩니다. 

 

 

3. 프로토타입 활용 (객체 메소드 생성)

 

Person 생성자함수에 printInfo 메소드 추가

 

2번 항목 Person 생성자함수에 `이름과 나이를 출력해주는 printInfo 메소드` 를 추가 했습니다.

 

그 다음, Braden 객체를 만들고 객체 내부를 확인해 보겠습니다.

 

 

Braden 객체 구조

 

이전 Person 생성자함수에 추가한 printInfo 메소드를 프로토타입 링크로 접근 가능한 것을 확인 할 수 있습니다. 

 

이 처럼 객체의 메소드는 프로토타입 으로 생성해줘야 합니다.

 

 

3.2. 객체 메소드를 프로토타입이 아닌 생성자함수 내부 함수로 선언한다면?

 만일 객체 메소드를 프로토타입이 아닌 생성자함수 내에 함수로 선언한다면 어떻게 될까요?

 

 

객체 메소드를 생성자함수 내부 함수로 생성한 뒤, Cookie 객체 생성

 

Cookie 객체를 보니 printInfo 메소드가 Person 객체의 프로퍼티로 선언되어 있습니다.

 

이는 객체를 생성할 때 마다 printInfo 메소드 또한 생성된 객체 갯수만큼 생성되는 것을 뜻합니다.

 

 

 

#잘못된 내용은 댓글 달아주시면 수정 하겠습니다.

1 Comments
댓글쓰기 폼