객체 지향 프로그래밍 - 프로토타입 체인

앞서 잠깐 설명드렸던 프로토타입 체인에 대해 설명드리겠습니다.

프로토타입 객체는 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고, 그 상위 프로토타입 객체에서도 마찬가지로 메소드와 속성을 상속받을 수 있습니다. 이를 *프로토타입 체인 (prototype chain) 이라합니다.

 

속성과 메서드의 예시

• Human 이라는 클래스를 이용해 kimcoding 를 정의해보기

let kimcoding = new Human('김코딩', 30);

// 속성
kimcoding.age;
kimcoding.gender;
// 메서드
kimcoding.eat();
kimcoding.sleep();

 

 

우리는 프로토타입 체인의 형태를 만들어 주기 위해 2가지 일을 해야합니다.
먼저 Person()과 Teacher() 을 각각 정의해줬다고 가정합니다.

 

1. .prototype 을 이용하여 프로토 타입 정의 해주기 (틀 정해주기)

//예시
Teacher.prototype = Object.create(Person.prototype);
//Person 이라는 틀을 새 객체로 생성하여 Teacher.prototype 으로 할당한다.

쉽게말하면 teacher의 틀은 어떤 틀을 따를 것이냐 라는 것을 정의해 주는 것입니다.

 

 

 

2.  지금 상태에선 Teacher.prototype에 Person.prototype의 틀을 물려받은 객체를 할당했기 때문에,
Teacher.prototype의 constroctor속성이 Person()으로 되어있습니다.
이를 바꿔주기 위해 다음과 같은 코드를 추가 해야 합니다.

Teacher.prototype.constructor = Teacher;
// Teacher.prototype.constructor === Person()을 상속받은 Teacher() 

 

 

그리고 다시 .call() 함수를 사용하여 다른 곳에서 정의된 함수를 현재 컨텍스트에서 실행할 수 있도록 합니다.

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}
//subject를 정의해 Person 과는 다른 Teacher만이 갖는 속성 만들어 줌.

 

 

 

 

상위 클래스의 프로토타입 객체에 접근하려면 .__prototype__ 을 이용하여 접근할 수 있습니다.

 

document.createElement('div') 로 새로운 div 를 만들었다고 가정했을 때,

let div = document.createElement('div');

div.__proto__ 
div.__proto__.__proto__
div.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__

console 창에 위와 같은 값을 실행했을 때 아래와 같은 결과 값을 얻을 수 있습니다.

 

HTMLDivElement{ } - HTMLElement{ } - Element{ } - Node{ } - EventTarget{ } - { }(Object)