프로토타입을 공식문서에 찾아보면 원형객체 어쩌고 하는데 그냥
상속
받은 부모의유전자
라고 생각하면 쉽다.
prototype
과 __proto__
아래의 코드는 Hero라고 하는 객체를 만드는 생성자함수
, 한마디로 객체 만드는 기계를 구현한 코드이다.
// ES5
function Hero(skil1, skil2){
this.q = skil1;
this.w = skil2;
}
이 때, Hero객체가 만들어지면서 Hero의 prototype이라는 객체
가 몰래? 생성된다. 이 두 객체는 이름만 봐도 서로 관련이 있다는 것을 알 수 있기 때문에 서로를 알 수 있는 방법이 필요하다.
사실 처음 Hero 객체
가 만들어질 때 prototype
이라는 속성을 이미 갖게 되고, 이 prototype
속성을 통해서 Hero의 prototype객체
를 참조할 수 있게 된다.
그리고 Hero의 prototype객체
는 Hero객체
의 소속이라는 것을 constructor
라는 속성을 만들어서 기록하고 Hero객체
를 가르키게 된다.
아래의 코드는 Hero의 prototype
의 속성에 e속성
을 추가하는 코드이다.
// ES5
function Hero(skil1, skil2){
this.q = skil1;
this.w = skil2;
}
Hero.prototype.e = function(){}
let yumi = new Hero('syarere', 'yumirang')
생성자를 통해 yumi
라는 객체를 만들면 q, w속성
과 함께 __proto__
라는 속성이 보이지는 않지만 함께 생기게 된다. 이 때, __proto__
라는 속성은 Hero의 prototype
즉, 부모의 유전자를 가르킨다.
따라서 Hero.prototype
, yumi.__proto__
둘 다 Hero의 prototype을 참조하는 방법
이 된다.
function Hero(skil1, skil2){
this.q = skil1;
this.w = skil2;
}
//Hero의 프로토타입 속성에 e속성을 추가
Hero.prototype.e = function(){}
console.log(yumi.e) // f(){}
위 코드에서 yumi 객체
는 직접 e속성
을 갖지 않지만 콘솔에 찍어보면 에러가 뜨지 않고 함수를 출력한다.
그 이유는 yumi
의 __proto__
속성이 Hero.prototype
을 참조하고 있기 때문이다.
프로토타입 체인
이라는 개념이 있기 때문에 OOP의 특징 중 하나인상속
이 가능하고class syntax
에서는extends
,super
와 같은 키워드를 사용한다. 이 때, 속성과 메서드를 물려주는 클래스를부모 클래스
, 물려받는 클래스를자식 클래스
라고 한다.
조회하고자 하는 속성을 해당 객체가 직접 가지고 있다면 조회할 수 있겠지만 없다면 어떻게 작동할까? 찾는 값이 없다면 이제 이 유전자라고 했던 프로토타입
을 들여다 보는 것이다. 그리고 프로토타입의 속성 중에 내가 찾는 속성이 있다면 그 속성을 가져 올 수 있다. 하지만, 만약 부모의 프로토타입에도 없다면 부모의 부모를 조회하고, 또 없다면 부모의 부모의 부모... 이런식으로 계속 타고 올라가서 찾을 것이고 마지막까지 없다면 그 속성은 없다고 할 것이다. 이것이 상속의 작동 원리
이고 프로토타입 체인(Prototype Chain)
이다.
class syntax
와 상속// 부모 클래스
class Hero{
constructor(skil1, skil2){
this.q = skil1;
this.w = skil2;
}
message(){
return `${this.skil1} 스킬 사용 ${this.skil2} 스킬 사용`
}
}
// 자식 클래스
class newHero extends Hero{ // extends 키워드
constructor(skil1, skil2, skil3){
super(skil1, skil2); // super 키워드
this.e = skil3;
}
message(){ // super 키워드
return super.message() + `${this.skil3} 스킬 사용`
}
newHero extends Hero
: Hero를 확장
해서 newHero를 만들자super()
: 부모 클래스의 생성자(constructor) 호출super.message()
: 부모 클래스의 message 함수 호출