프로토타입 확장

확장은 extends라는 키워드를 많이 사용을 하며 강의나 책에서는 상속이라는 말로 부모와 자식으로 표현되기도 합니다.

부모 => 확장 => 자식 이를 통해 부모가 가진 것보다 자식이 더 많은 기능들을 확장될 수 있습니다.

이 확장은 class를 사용하는 것을 권장하지만, 이번 시간에는 프로토타입을 활용한 확장에 대해 배워보도록 하겠습니다.

super class를 sub class로 확장해보도록 하겠습니다.

//super class
function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}

//기능 부여
Animal.prototype.getInfo = function () {
  return this.name + '가(이)' + this.sound + '소리를 낸다.'
}

//Sub class
function Friends(name, sound) {
  Animal.call(this, name, sound) //명시적 this 바인딩
}

//프로토타입 연결 : 연결이 안된다면 dog.getInfo()에 typeerror가 발생합니다.
Friends.prototype = Object.create(
  Animal.prototype,
)

const dog = new Friends('개', '멍멍')
const cat = new Friends('고양이', '냐옹')

console.log(dog.getInfo()) //개가(이)멍멍소리를 낸다.
console.log(cat.getInfo()) //고양이가(이)냐옹소리를 낸다.

위와 같이 프로토타입을 연결함으로써 super class의 기능을 활용을 하고, 확장도 잘 진행된 것을 확인할 수 있습니다.

console.log(dog.constructor.name) //Animal

그런데 dog의 constructor을 확인해보니 Animal로 되어 있는 것을 확인할 수 있습니다. 이를 Friends로 바꿔보도록 하겠습니다.

Friends.prototype.constructor = Friends

console.log(dog.constructor.name) //Friends

하지만 프로토타입을 이용하면 복잡하고 까다로운 로직을 처리해야합니다. 그렇기 때문에 조금 더 쉽고 간결한 Class를 사용하는 것을 권장드립니다.

---

참고자료

• MDN
• 장현석 강사님의 강의
• 코어자바스크립트