Object Inheritance (Video Version)

윈스턴 생성 프로그램을 가지고 시작할게요

새로운 개체 타입 Hopper를 추가했어요

호퍼가 외로워보였어요
그래서 윈스턴이랑 똑같이 정의를 했어요

생성자를 이용하여 특성을 정의할 수 있고요
그릴 수도 있으며

말할 수도 있고요
제가 이번에 새롭게 추가한

Horray입니다
호퍼는 축하하는 것을 좋아하는데 반면

윈스턴은 그렇지 않죠
그리고 밑부분에는 Hopper 객체를 2개 생성하였습니다

Little Hopper와 Big Hopper로 말이죠

이들을 그리고 말도 할 수 있고
만세도 할 수 있게 해줬어요

괜찮네요

여기 코드를 보면요

흥미로운 것을 발견할 수 있습니다

호퍼와 윈스턴의 코드가 유사하다는 것을 말이죠
생성자를 보면 talk 함수가

예전에 우리가 썼던 윈스턴의
talk 함수와 똑같다는 것을 알 수 있습니다

그리고 같은 draw 함수를 갖고 있고요

이 두 객체타입에는 공통점이 많습니다

이 세계에서는 호퍼와 윈스턴이
매우 비슷한 특성을 갖기 때문이죠

컴퓨터 밖 실제 세계에서 생각해본다면

대부분의 객체 타입들은 유사점들을
공유하고 있을 것입니다

다른 객체들과 말이죠

예를 들어 동물 왕국에서는

모든 동물은 비슷한 특성을 갖고 있습니다
하지만 서로 다른 동물 종이 있지요

인간과 같이 말이죠
인간은 동물이라는 점에서 유사성을 띄고 있지만

인간 고유의 특성을 가지고 있습니다

그래서

animal 타입은 human 타입에서
상속하는 객체 타입입니다

주석으로 시작할게요
우리는 animal 에 속해 있죠

모든 동물은 소리를 내죠

인간도 언어를 구사하죠

그래서 객체 상속의 개념은

프로그래밍할 때 유용합니다

여러 객체 상속을 자바스크립트에서
구현할 수 있습니다

그래서 이제 생각해야 될 것은

'객체 타입으로 공유할 특성이 무엇인가' 입니다

그리고 그것의 이름도 생각해 봅시다

새로운 객체타입을 만들 것이고

기존의 객체를 대표해야 합니다

그들을 이제 creature 이라고 합시다

그들은 모두 생명체입니다

var creature = 이고요
생성자도 필요하겠죠

호퍼와 윈스턴의 생성자의 내용을 복사합시다

좋아요

그러면 봅시다

이제

이제 뭘해야죠?

이제 "talk" 함수를 추가합시다

talk 함수는 호퍼에서 가져옵시다
물론 Creature.prototype 으로 고치고요

좋아요

이제 생명체 객체 타입을 만들었어요

그러면 우리는 이제 호퍼도 생명체라는

creature 객체임을 밝혀주어야 합니다

여기에다가 적어줄게요

Hopper.prototype = Object.create(Creature.prototype)

이 줄이 의미하는 것은 호퍼의 프로토타입이
생명체 프로토타입에 바탕이 된다는 것입니다

이제 호퍼의 함수를 호출할 때마다
호퍼 프로토타입에서 먼저 검색하지만

없다면 생명체 프로토타입에서 찾아볼 것입니다

이것을 프로토타입 체인이라고 합니다

이것을 했다면 기존의 talk 함수는
지워버려도 되겠죠?

호퍼에서 말이죠

이제 생명체 객체 타입에도 있으니깐요

이 함수는 프로토타입 체인으로 있겠죠

오호라

됐어요!

생명체 프로토타입이 호출되어서 실행이 됐어요

이제 윈스턴 것도 지워볼게요

talk라는 메소드가 없어서 오류가 나네요

왜 그럴까요?
윈스턴 생성자도 있고

draw 도 있는데 talk 만 없어요

윈스턴의 프로토타입이 생명체 프로토타입이

되어야하는 것을 깜빡했네요

매우 중요한 문장이예요

Winston.prototype = Object.create(Creature.prototype)

짜잔!

중요한 거예요

생성자 바로 뒤에 이 문장을 썼고
프로토타입에 무엇인가를 추가하기 전에 썼어요

보통 이런 식으로 하게 됩니다

시작할 때에는

프로토타입이 상속되어 있는 곳을 씁니다

그리고 나서야 프로토타입에 추가할 수 있습니다

왜냐하면 만약에 윈스턴이나 호퍼에게
특별한 것이 있다면

생명체 프로토타입에는 없어야죠

그리고 이들을 사용하므로써 좋아졌네요

근데 아직 반복되는 코드가 남아있어요

생성자 코드입니다

맞죠? 3번이나 있어요

그냥 지우면 안 될까요?

해봅시다

음.. 별로 좋아보이지는 않네요

호퍼가 좌측상단에 있고요
자신의 정보가 모두 사라졌어요

자바스크립트에서 프로토타입을 상속하더라도
같은 생성자를 쓸 수는 없기 때문이예요

그러면 이런 객체들을 위한 생성자를 정의해봅시다

객체에서 생성자를 부르기 쉽도록 말이죠

우리가 해야될 것은

Creature.call(this, nickname, age, x, y)

실행되었네요
이것이 뜻하는 바는 바로

creature의 생성자 함수를 부르는 것입니다

이 함수를 부르면 생성자 함수에 넣고 싶은 정보를
전달이 되고

마치 호퍼 객체의 생성자인 듯이 호출됩니다

그리고 괄호 안에 있는 인자가 전달이 됩니다

이 인자들은 아까 호퍼가 호출받은 정보들입니다

마치 위의 생성자가 호퍼 속에 있는 것처럼 됩니다

이것이 우리가 원하는 바입니다
실행됐어요

이제 우리는

이 문장을 윈스턴에도 붙여넣읍시다

성공했어요!

정리해볼게요 우리는 공유된 속성과 함수를
creature라는 하나의 객체 타입에 넣었어요

그리고 이것을 바탕으로 2개의
객체 타입을 만들었고요

이들은 몇 개의 함수를 상속받지만
그들만의 함수도 있습니다

주목해야 할 점은 공유된 특성을 한 곳에서
수정할 수 있다는 점입니다

만약에 age를 바꾸고 싶다면
여기에 "+ years old" 써주면

모두 끝에 years old 가 붙을 거예요

아니면 talk 함수에 "sup"을 대입시키면
이제 윈스턴과 호퍼도 "sup"을 외칠 거예요

이제 당신은 기본 객체 타입으로부터 상속시켜
새로운 객체 타입을 만드는 방법을 알게 되었습니다

여러분은 '상속'이 그림, 애니메이션, 시뮬레이션 및 게임에
유용하게 이용될 수 있음을 알 수 있어요

예를 들어 게임을 생각해보면
상당히 많은 종류의 캐릭터가 있어요

전부 뛸 수는 있지만 몇 명은 점프를 못합니다

이런 예에서 상속을 적용한다면 아주 쉽게 구현할 수 있지요

여러분은 이것 말고도 적용방안을 생각해 낼 수 있을 것이라 믿습니다