🔖 Object.create()로 구현하는 상속기능

상속기능 구현 할 수 있는 방법이 몇가지 더 있는데 이번엔 Object.create()로 구현해보자.

 

다른방법 으로 상속기능을 구현 할 수 있는 방법을 포스팅 해놨으니 참고하면 도움이 될 것이다.

-prototype

2023.02.28 - [Front end/JavaScript] - 🔖 객체지향2. prototype

🔖 객체지향2. prototype

-function 기계() {} 

2023.02.28 - [Front end/JavaScript] - 🔖 객체지향1. constructor(생성자 함수 짧게 줄여서 생성자)

🔖 객체지향1. constructor(생성자 함수 짧게 줄여서 생성자)

prototype, constructor로 상속기능을 구현하는 것은 옛날 문법이라고 할 수 있다.

 

그래서 ES5에 도입된 Object.create()를 써서 쉽게 상속기능을 구현해보자.

const 부모 = { fisrtName : '강' };

부모가 가진 name, age를 그대로 물려받은 자식 object를 만들고 싶으면?

- constructor 함수를 만들거나

- Object.create()를 이용하거나

 

 

상속기능을 구현하는 ES5 방법 : Object.create( 물려받을 부모 object )

const 부모 = { firstName : '강', age : 40 };

const 자식 = Object.create(부모);
//                ▲ prototype을 부모로 해주세요

console.log(자식) // {}

console.log(자식.firstName) // 강
console.log(자식.age) // 40

위에서 작성한거와 같이 Object.create()안에 자식이 prototype으로 사용할 오브젝트(부모)를 넣어준다. 

 

console.log(자식); 을 하면 아무것도 없는 빈 객체가 출력된다.

왜일까?

► 정의한 것이 없기 때문에 당연하다. Object.create(부모);는 자식의 prototype을 정의한 것이지 자식을 정의한 것이 아니다. 

 

console.log(자식.firstName); 을 하면 '강' 이 출력된다.

왜일까? 

► 자식의 prototype을 부모로 두고 있기 때문에 부모의 속성을 상속받아 사용 할 수 있는것이다.

▲ 이해가 안간다면 위에 링크해둔 prototype 포스팅에 prototype 동작원리를 보면 이해가 갈 것이다.

 

 

 

자식이 age가 40이다. 바꾸고 싶다면 어떻게 해야할까?

var 부모 = { firstName : '강', age : 40 };
var 자식 = Object.create(부모);
자식.age  = 20;

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

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

 

부모로부터 상속받은 40이라는 age가 출력되지 않는 이유는??

► 왜냐하면 자바스크립트 오브젝트 자료형에서 특정 자료를 꺼낼 때 묻는 순서가 있다.(자바스크립트 알고리즘임)

 

자식.age를 꺼내주세요~ 라고 하면 JS는 아래와 같은 순서로 질문한다.

JS : 1. 자식이라는 object가 직접 age 속성을 가지고 있는가?? 있으면 출력 없으면 2번으로

JS : 2. 자식의 부모 prototype에 age 속성을 가지고 있는가?? 있으면 출력 없으면 3번으로

JS : 3. 부모의 부모 prototype에 age 속성을 가지고 있는가?? 있으면 출력 없으면 다음번으로

...

이런 순서로 age를 출력한다.

 

그래서 지금 자식의 age는 20이 나오는 것이다.