자바스크립트 JavaScript : Object.create()

ES5 출시 때 나온 Object.create()라는 신기한 문법이 하나 있는데, 손쉽게 상속을 이용해서 오브젝트를 만들 수 있습니다.

 

Object.create() 사용하기

Object.create(부모object); 이렇게 사용하시면 이 자리에 오브젝트 자료형 하나가 남습니다. 

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

 

예를들면

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);

console.log(자식.age); //50나옴

이렇게 사용한다는 소리입니다. 

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

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

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

 

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

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);
자식.age  = 20;

console.log(자식.age); //20 나옴

자식이라는 object에 age : 20 이라는 값을 부여합니다.

 

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

A. 왜냐면 자바스크립트 오브젝트 자료형에서 특정 자료를 꺼낼 때 묻는 순서가 있습니다.. 
자식.age를 꺼내주세요~ 라고 하면 
1. 자식 object가 직접 age를 가지고 있으면 그거 출력
2. 없으면 자식의 부모 prototype을 뒤져서 age가 거기 있으면 그거 출력
3. 거기도 없으면 부모의 부모 prototype을 확인 
이런 순서로 age를 출력합니다. 

 

그래서 자식.age는 20을 출력할 수 있습니다.

 

손자 오브젝트도 쉽게 만들 수 있습니다. 

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

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

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);
자식.age  = 20;

var 손자 = Object.create(자식);

console.log(손자.age); // 20

이게 상속의 상속을 받는 방법입니다.

값 추가도 여러분 object 방식으로 하고 함수 추가하는 것도 그냥 등호로 넣으면 되니까 손쉽게 만들 수 있습니다.