[ES5]ES5방식으로 쉽게 상속하기

prototype이니 this니 class니 뭐니 어렵다면 그냥 ES5 방식으로 하셔도 됩니다.

ES5 출시 때 나온 Object.create()라는 신기한 문법이 하나 있는데 

내가 상속을 이용해서 오브젝트를 만들고 싶다면 이거보다 더 쉬운 문법이 없습니다. 

하지만 class문법에 밀려 인지도는 낮습니다. 

 

 

 

Object.create() 사용하기

Object.create(부모object);

이렇게 사용하시면 이 자리에 오브젝트 자료형 하나가 남습니다. 

그리고 소괄호 안에 적은 부모object가 유전자(prototype)가 되는 것이고요.

한번 예를 들어봅시다.  

 

이렇게 쓴다는 소리입니다.

그럼 자식이라는 object는 부모를 prototype으로 두게 됩니다. 

그럼 자식.name 해도 'Kim'이 출력되고요, 자식.age 해도 50이 출력됩니다. 

자식이 성공적으로 부모 속성들을 상속했죠?

상속기능 만들기 끝입니다. 매우 간단하고 쉽습니다. 

 

 

 

 

그럼 자식의 age를 바꾸고 싶으면 어떻게 하죠?

그냥 자식이라는 object에 age : 20 이라는 값을 부여했을 뿐입니다.

그럼 이제 자식.age 할 때마다 20이 출력됩니다. 

 

Q. 부모로부터 상속받은 50이라는 age가 출력되지 않는 이유는 뭐죠?

 

왜냐면 자바스크립트 오브젝트 자료형에서 특정 자료를 꺼낼 때 묻는 순서가 있다고 배웠었습니다.

자식.age를 꺼내주세요~ 라고 하면 

1. 자식이라는 object가 직접 age를 가지고 있으면 그거 출력

2. 없으면 자식의 부모 prototype을 뒤져서 age가 거기 있으면 그거 출력

3. 거기도 없으면 부모의 부모 prototype을 뒤져서.. 

이런 순서로 age를 출력합니다. 

 

그래서 지금 자식놈은 20이 나오는 것입니다. 

 

 

 

손자도 쉽게 만들 수 있습니다.

그니까 자식의 자식도 쉽게 만들 수 있다는 소리입니다.

부모가 가진 속성, 자식이 가진 속성을 전부 물려받는 손자를 만들어봅시다. 

 

손자를 만들었습니다.

얘는 자식과 부모가 가진 속성들을 전부 물려받는 애입니다. 

그럼 손자.age하면 무엇이 나올까요?

20이 출력됩니다. 

 

아직도 왜 20이 나오는지 모르겠다면

1. 손자에 age가 있는지 확인하고
2. 없으면 부모 prototype에 있는지 확인하고
3. 거기도 없으면 부모의 부모 prototype에 있는지 확인하고..

그렇게 하나씩 확인해서 젤 가까운 age를 출력시키기 때문입니다.

 

 

 

아무튼 이게 상속의 상속을 받는 방법입니다. 매우 간단하죠?

값 추가도 여러분 object 다루듯이 하면 되니까 쉽습니다.

함수 추가하는 것도 그냥 등호로 넣으면 되니까 쉽고요. 

 

하지만 요즘 개발자들은 있어보이게 class, 그리고 extends 문법을 이용해서 상속의 상속기능을 만들어냅니다. 

자바같은 프로그래밍 언어 하던 분들이 보면 친숙하게 느낄텐데 

외울게 많아 우리는 약간 거부감이 들 수 있습니다. 

 

 

 

 

출처 : 코딩애플의 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법