📖 프로토타입 - 1

이번 포스팅에서는 자바스크립트의 프로토타입에 대해 정리해본다. 프로토타입은 내용이 많아서 두편 정도에 나눠서 포스팅하게 될 것 같다.

이번 편에서는 프로토타입을 통한 상속에 대해 가볍게 알아보자!

상속

상속(inheritance)은 객체지향 프로그래밍의 핵심개념으로써 특정 객체의 프로퍼티나 메서드를 다른 객체가 받아와서 그대로 사용할 수 있게 하는 기능이다.

Java나 C++ 같은 다른 객체지향 언어에서는 Class를 이용하여 상속을 구현한다.
하지만 자바스크립트에서는 프로토타입을 기반으로 상속을 구현한다. MDN에 프로토타입에 대한 설명을 보자.

자바스크립트는 프로토타입을 기반으로 상속을 구현한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.)

프로토타입

그러면 자바스크립트에서 프로토타입을 통해 상속이 이뤄진다는 것을 알게 됐으니, 프로토타입에 대해 조금 더 자세히 알아보자. 자바스크립트에서의 상속은 정확히 이야기하면 프로토타입 객체를 통해서 이루어진다.

프로토타입 객체란 단순히 특정 객체의 부모 역할을 하는 객체로써 상속을 위해 사용된다. 부모 객체는 프로토타입 객체를 통해 자식에게 공유 프로퍼티를 제공하고, 자식 객체는 부모의 프로토타입 객체를 통해 부모의 프로퍼티나 메서드를 사용할 수 있다.

또한, 자식 객체는 [[prototype]] 접근자, 즉 .__proto__를 통해 부모의 프로토타입 객체에 직접 접근해볼 수 있다.

프로토타입을 통한 상속

사실 우리는 이미 프로토타입을 통한 상속을 경험했다.

다음 코드를 보며 이해해보자.

const person = {
  age : 4
};

// 정의하지 않은 hasOwnProperty 메서드 호출
person.hasOwnProperty('age') // true

age라는 프로퍼티를 갖는 간단한 객체 person을 정의했다.

그리고 그 후에 person 객체에 정의하지 않은 hasOwnProperty 메서드를 호출했는데 true라는 값을 반환한 것을 볼 수 있다.

어떻게 된 일일까? person 객체를 자세히 뜯어보자.

person 객체를 살펴보면 우리가 정의한 속성 age라는 속성 외에도 .__proto__ 라는 프로퍼티를 가지고 있고, 우리가 사용했던 hasOwnProperty 메서드도 이 객체가 가지고 있는 것을 확인할 수 있다.

즉 person 객체는 부모의 프로토타입 객체에 있는 hasOwnProperty를 실행한 것이다!

근데...난 아무것도 상속한적이 없는데?🤔

I'm your father. I'm Object.

의문을 풀기위해 MDN에서 Object에 관한 글 일부를 가져왔다.

자바스크립트에서 모든 객체들은 Object의 자손이다. 모든 객체는 Object.prototype으로부터 메서드와 속성을 상속받는다.

MDN 문서에 따르면 우리가 정의한 person이라는 객체도 Object의 자식이고, Object.prototype 객체로부터 메서드와 속성을 상속 받았을 것이다!

그러면 person의 부모는 Object이고, person.__proto__의 정체는 Object의 프로토타입 객체인 Object.prototype였던 것일까?

그렇다. 우리가 정의한 person 객체는 Object의 자손이고, 그래서 우린 Object.prototype 객체가 가지고 있는 메서드인 hasOwnProperty를 사용할 수 있었던 것이다!

즉, person객체는 Object 객체를 상속 받았다는 사실을 알 수 있다.

전체적인 구조는 아래와 같다.

이미지 출처 : https://poiemaweb.com/js-prototype

정리

• Object는 모든 객체의 부모이다. (모든 객체는 Object 객체를 상속한다.)
• 따라서 Object.prototype 객체가 갖는 메서드를 사용할 수 있다.
• 부모는 prototype 객체를 통해 메서드를 공유하고, 자식 객체는 객체는 .__proto__을 통해 부모의 prototype 객체에 접근 가능하다.

다음 편에는 프로토타입을 통한 상속방법과, 프로토타입 체인에 대해서 알아보자!