느릿느릿 프로그래밍
[JS] prototype 이란? 본문
(정보 업데이트 !!)
ES6 부터는 JS에서도 Class를 쓸 수 있게 되었다!
이제 JS에서도 Class를 통해 상속이 가능하다!
prototype : 원형
자바스크립트는 객체지향언어이지만, 클래스 개념이 없다. 대신 Prototype 이라는 것을 사용한다.
그래서 자바스크립트는 Prototype 기반 언어라고도 불린다.
1. 프로토타입이란?
Javascript(이하 JS)에서 객체 생성은 함수를 통해 이루어진다.
그리고 JS에서 생성되는 객체는 전부 Object의 자식인 것이다!
객체 생성의 과정을 보기 전에 일단 JS에서 함수를 정의했을 때 일어나는 일을 살펴보자.
예로 Person 함수를 정의해보자.
우리가 Person 함수를 정의하면, JS에는 함수만 짠! 하고 생기지 않는다.
Person 함수와 Person Prototype 객체 2가지가 생성된다.
먼저 Person 함수에는 prototype이라는 속성이 있다. 이 속성은 Person Prototype 객체를 가리키고 있기 때문에 이를 통해 객체에 접근이 가능하다. 역으로 Person Prototype 객체 안의 constructor에서는 생성되었던 함수인 Person 함수를 가리키고 있다.
그리고 __proto__라는 속성을 가지고 있는데, 이는 프로토타입 체인(Prototype Chain)이다. 상위 프로토타입 객체를 가리키고 있는 속성이다. 이 친구는 아래와 같은 상황에서 진가를 보인다!
Person 함수를 이용해 객체를 만들어보자.
var Aladdin = new Person();
위 그림은 이렇게 업데이트 될 것이다.
그리고 다음과 같이 Person Prototype 객체에 속성을 추가하고 Aladdin 에서 불러보자.
Person.prototype.pet = "Abu";
console.log(Aladdin.pet); // "Abu"가 출력된다.Aladdin은 pet이라는 속성이 없는데 어떻게 "Abu"가 출력되는 걸까?
이는 다음 그림을 보면 알 수 있다.
먼저 Aladdin.pet을 호출하였을 때, Aladdin에는 pet이라는 속성이 없다. 그래서 Aladdin 객체 안의 __proto__가 가리키고 있는 Person prototype 객체로 올라가 여기서 pet이라는 속성을 찾는다. 그리고 여기서 찾은 pet의 값을 반환하게 되는 것이다.
JS에서는 이런 Prototype의 특징을 이용해 클래스 개념 없이도 상속의 효과를 낼 수 있다.
'프로그래밍 > Javascript' 카테고리의 다른 글
| [JS] JS 엔진 - V8의 Hidden Class (0) | 2019.10.07 |
|---|