ES5 prototype(프로토타입) 상속기능.

 

Object.create()

ES5 문법 중 하나인 프로토타입 상속 기능으로 간단하게 사용 가능하다.

 

 

---

 

 

let parents = { name: "Oh", age: 50};
 
let child = Object.create(parents);
console.log(child)

let grandChild = Object.create(child); 
console.log(grandChild)

상속할 부모(parents)에 속성 데이터를 할당하고

 

첫 번째 자식(child)에게 Object.create(parents); 을 할당하여 부모의 속성을 상속한다.

그리고 콘솔을 출력하면  {} 이렇게만 출력되는데 그건 child에 가 따로 속성 값을 부여하지 않아서 이다. 하지만 더보기 버튼을 누르면  [[Prototype]] : Object / age: 50 / name: "Oh"를 가지고 있는 걸 확인할 수 있는데 부모가 가지고 있는 속성을 child가 상속받았다는 걸 알 수 있다.

 

그리고 child.age를 출력하면 50 이 나오게 되는데 위에서 말한 거처럼 child가 아직 속성을 가지고 있지 않아서 age를 찾으면 child에서 먼저 찾아보고 없으면 위로 올라가 부모의 유전자에서 age를 확인하다 그리고 그곳에 age 가 있다면 그 값을 출력하게 된다.

child.age = 10이라고 값을 추가해주면 다시 출력했을 때 10이 나오는 걸 확인할 수 있다.

 

두 번째 손자(grandChild)에게 첫 번째 자식(child) 상속시키면 grandChild는 child 와 parents 모두의 유전자를 가지고 되고 grandChild.age 를 출력하면 현재 정의된 age 가 없기때문에 바로위 첫번째 자식(child)의 age를 찾아서 출력하게 된다.

 

 

---

 

 

이러한 방법으로 메소드도 상속할 수 있다.

var parents = {
  age: 50,
  nextAge: function(b){
    return this.age + 1;
  }
};

console.log(parents.nextAge()); // 51
// parents.nextAge을 호출하면 'this' 는 parents를 가리킨다.

var child = Object.create(parents);
// child 는 프로토타입을 o로 가지는 오브젝트이다.

child.age = 12; // child 에 'age'라는 새로운 속성을 만들었다.
console.log(child.nextAge()); // 13

// child.nextAge이 호출 될 때 'this' 는 'child'를 가리킨다.
// 따라서 parents의 함수 nextAge을 상속 받으며,
// 'this.age'는 child.age를 나타내며 child의 개인 속성 'age'가 된다.

 

 

 

 

참고자료

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Object.create() - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

상속과 프로토타입 - JavaScript | MDN

 

 

https://github.com/chry8822

chry8822 - Overview