JavaScript: 객체 Object(2)

Beautify.log·2021년 11월 10일
0
post-thumbnail

안녕하세요. 저번 모던 자바스크립트 튜토리얼 포스팅에서 객체의 기본에 대해 알아보았습니다. 이번 포스팅에서는 객체지향 언어의 특징이라고 할 수 있는 프로토타입에 대해 살펴보고자 합니다.

상속이란?

객체지향 언어, 즉 C++, Java, JavaScript는 상속에 기반을 두는 언어입니다. 상속이라는 것은 Inheritance 말 그대로 어떤 객체가 다른 객체로부터 기능을 이어받는 것을 의미합니다.

C++이나 Java는 클래스를 이용하는데, 이 언어에서의 상속이란 클래스를 상속해준다는 점에서 자바스크립트와 조금 다릅니다. 자바스크립트는 객체를 상속해주고 이는 프로토타입 체인이라는 객체의 자료 구조로 구현되어 있습니다.

그렇다면 어떤 이유때문에 상속이라는게 필요할까요?
상속을 사용하게 되면 이미 정의된 properties와 method 코드를 재사용할 수 있게 됩니다. 또한 새로운 기능을 추가하여 확장된 객체를 생성할 수도 있죠.

코드의 중복을 피할 수 있기 때문에 유지보수의 측면에서 매우 용이합니다.

프로토타입 체인이란?

프로토타입 체인

우선 자바스크립트의 모든 객체는 내부 프로퍼티인 [[Prototype]]을 가지고 있는데 이것은 함수 객체의 prototype 프로퍼티와는 차이가 있습니다. ES6부터 __proto__로 프로퍼티에 프로토타입의 값이 저장됩니다.

예를 들어,

const obj = {};
console.log(obj.__proto__);		// Object {}

obj이라는 빈 객체가 있습니다. 이 객체의 프로토타입을 확인해보면 Object {}, 즉 객체임을 알 수 있습니다.

객체의 __proto__ 프로퍼티는 그 객체에게 상속을 해 준 부모 객체를 가리키고 객체는 __proto__ 프로퍼티가 가리키는 부모 객체의 프로퍼티를 사용할 수 있습니다.

예를 들어,


// name과 sayHello를 객체에 담아줍니다.
const myObj = {
  name: "Jane",
  sayHello: function () { console.log(`Hello! ${this.name}`); }
}

// 별도의 객체를 만들어줍시다.
const myObj2 = {
  name: "Jonathan"
};

// myObj 객체를 myObj2에 상속시켜줍니다.
myObj2.__proto__ = myObj;

// 빈 객체를 만들어줍니다
const myObj3 = {};

// myObj2 객체를 myObj3에 상속시켜줍니다.
myObj3.__ptoro__ = myObj2;

// 상속이 잘 되었는지 확인합니다.
myObj3.sayHello();

결과는 "Hello Michael!"이 나올 것입니다.

이처럼 __proto__ 프로퍼티로 myObj3myObj2를 가리키고, myObj2myObj을 가리킵니다. 여기에서 myObj3__proto__이외의 다른 프로퍼티를 갖고 있지 않습니다.
그렇지만 myObj3.sayHello()를 호출하면 정상적으로 실행이 되죠. 이것은 __proto__ 프로퍼티가 가리키는 __proto__를 거슬러 올라가 sayHello()를 실행해주기 때문입니다.

이와 같이 자신이 갖고 있지 않은 프로퍼티를 __proto__ 프로퍼티가 가리키는 객체를 거슬러 올라가며 검색해주는 객체의 연결고리를 프로토타입 체인이라고 부릅니다.

프로토타입

여기에서 객체의 __proto__ 프로퍼티가 가리킨은 객체가 상속을 해준 객체가 되고 이 객체를 그 객체의 프로토타입 이라고 합니다. 객체는 자기 자신이 갖고 있지 않은 프로퍼티나 메서드를 프로토타입 객체에 위임한다고 표현할 수 있습니다.

자바스크립트는 이러한 프로토타입 체인을 사용하여 객체의 프로퍼티를 다른 객체에 상속할 수 있습니다. 이를 프로토타입 상속이라 하고, 프로토타입 상속을 하는 객체 지향 언어를 프로토타입 기반 객체 지향 언어라고 합니다.

그러나 실제로 프로그래밍을 할 때 __proto__라고 직접 명시하지는 않습니다. 다음과 같은 방법을 사용할 수 있습니다.

  1. 생성자로 객체를 생성할 때 생성자의 prototype 프로퍼티에 추가하는 방법
  2. Object.create 메서드로 상속 받을 프로토타입을 지정하여 객체를 생성하는 방법

프로토타입 가져오는 방법

객체의 프로토타입은 Object.getPrototypeOf method로 가져올 수 있습니다.

function P() {}
const obj = new P();
console.log(Object.getPrototypeOf(obj));	// Object {}

물론 브라우저에서 obj.__proto__와 같은 방식으로 가져올 수도 있으나 지원하지 않는 경우가 있을 수 있습니다.

프로토타입 기반 객체 지향 언어에 대한 감이 조금 오시나요?

다음 포스팅에서 또 이어가보도록 하겠습니다!

profile
tried ? drinkCoffee : keepGoing;

0개의 댓글