[JavaScript] Prototype 알아보기

bbio3o·2021년 2월 19일
0

JavaScript

목록 보기
7/11
post-thumbnail

📌 Prototype이란?

자바스크립트는 프로토타입 기반 언어입니다. 클래스가 없어 기본적으로 상속이라는 개념이 없으므로,
클래스 기반 언어의 상속을 흉내내기 위해 프로토타입을 이용합니다.
ECMA6 표준에서는 Class 문법이 추가되었습니다. 하지만 문법이 추가되었다는 것이지, 자바스크립트가 클래스 기반으로 바뀌었다는 것은 아닙니다.

프로토 타입의 정의를 살펴보면 다음과 같습니다.

어떤 객체를 원형으로 삼고 이를 참조해 상속과 비슷한 효과를 볼 수 있다.
Prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.


자바스크립트에 클래스는 없지만 함수(function)와 new를 통해 클래스를 비스무리하게 흉내낼 수 있습니다.

function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var kim  = new Person();
var park = new Person();
console.log(kim.eyes);  // => 2
console.log(kim.nose);  // => 1
console.log(park.eyes); // => 2
console.log(park.nose); // => 1

kim과 park은 eyes와 nose를 공통적으로 가지고 있는데, 메모리에는 eyes와 nose가 두 개씩 총 4개 할당됩니다. 객체를100개 만들면 200개의 변수가 메모리에 할당되겠죠?
바로 이런 문제를 프로토타입으로 해결할 수 있습니다.

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
var kim  = new Person();
var park = new Person():
console.log(kim.eyes); // => 2

자바스크립트 개발을 하시는 분이라면 아마 써보진 않았어도 최소한 본 적은 있을겁니다.
간단히 설명하자면 Person.prototype이라는 빈 Object가 어딘가에 존재하고,
Person 함수로부터 생성된 객체(kim, park)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있습니다.

즉, eyes와 nose를 어딘가에 있는 빈 공간에 넣어놓고 kim과 park이 공유해서 사용하는 것이죠.

프로토타입을 깊게 파보면 엄청나게 복잡하지만 개발자가 사용하는 부분만 본다면 이게 거의 전부입니다. 하지만 개발자는 사용법만 알고있는게 아니라 언제나 왜? 를 생각해야합니다.

프로토타입이 왜 이렇게 쓰이는지 조금 더 깊게 알아보도록 하겠습니다.


자바스크립트에는 Prototype Link 와 Prototype Object라는 것이 존재합니다. 그리고 이 둘을 통틀어 Prototype이라고 부릅니다.
객체는 언제나 함수(Function)로 생성되며 함수가 정의될 때는 2가지 일이 동시에 이루어집니다.

1. 해당 함수에 Constructor(생성자) 자격 부여
Constructor 자격이 부여되면 new를 통해 객체를 만들어 낼 수 있게 됩니다. 이것이 함수만 new 키워드를 사용할 수 있는 이유입니다.
2. 해당 함수의 Prototype Object 생성 및 연결
함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성이 됩니다.
그리고 생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있습니다.

Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 __proto__를 가지고 있습니다.
constructor는 Prototype Object와 같이 생성되었던 함수, 생성자 함수를 가리키며,
**__proto__**는 Prototype Link입니다.

prototype 속성은 함수만 가지고 있던 것과는 달리
__proto__속성은 모든 객체가 빠짐없이 가지고 있는 속성입니다.
__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킵니다.


📌 Prototype chain 프로토타입 체인

__proto__속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라고 합니다.

객체에서 프로퍼티를 찾을 때 없으면 __proto__ 속성으로 연결된 공유하는 객체를 살펴보고 찾을 때 까지 계속 부모역할을 하는 객체를 찾아보다가 찾는 속성이 없다면, 최종적으로 최상위의 Object.prototype을 탐색하게 됩니다.
Object.prototype은 __proto__를 가지고 있지 않기 때문에 탐색은 종료되며, undefined를 리턴하게 됩니다.

좀 더 자세한 내용은 아래 참조를 확인해 볼 수 있습니다.

참조

profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글