0:00:01.038,0:00:03.173
윈스턴 생성 프로그램을 가지고 시작할게요
0:00:03.173,0:00:06.176
새로운 개체 타입 Hopper를 추가했어요
0:00:06.176,0:00:11.924
호퍼가 외로워보였어요[br]그래서 윈스턴이랑 똑같이 정의를 했어요
0:00:11.924,0:00:15.838
생성자를 이용하여 특성을 정의할 수 있고요[br]그릴 수도 있으며
0:00:15.838,0:00:20.316
말할 수도 있고요[br]제가 이번에 새롭게 추가한
0:00:20.317,0:00:22.842
Horray입니다[br]호퍼는 축하하는 것을 좋아하는데 반면
0:00:22.848,0:00:27.924
윈스턴은 그렇지 않죠[br]그리고 밑부분에는 Hopper 객체를 2개 생성하였습니다
0:00:27.924,0:00:31.173
Little Hopper와 Big Hopper로 말이죠
0:00:31.173,0:00:35.673
이들을 그리고 말도 할 수 있고[br]만세도 할 수 있게 해줬어요
0:00:36.395,0:00:37.432
괜찮네요
0:00:37.432,0:00:39.928
여기 코드를 보면요
0:00:39.928,0:00:41.823
흥미로운 것을 발견할 수 있습니다
0:00:41.973,0:00:52.324
호퍼와 윈스턴의 코드가 유사하다는 것을 말이죠[br]생성자를 보면 talk 함수가
0:00:52.324,0:01:00.748
예전에 우리가 썼던 윈스턴의[br]talk 함수와 똑같다는 것을 알 수 있습니다
0:01:00.763,0:01:03.897
그리고 같은 draw 함수를 갖고 있고요
0:01:03.897,0:01:07.922
이 두 객체타입에는 공통점이 많습니다
0:01:07.922,0:01:12.360
이 세계에서는 호퍼와 윈스턴이[br]매우 비슷한 특성을 갖기 때문이죠
0:01:13.088,0:01:17.143
컴퓨터 밖 실제 세계에서 생각해본다면
0:01:17.642,0:01:20.009
대부분의 객체 타입들은 유사점들을[br]공유하고 있을 것입니다
0:01:20.009,0:01:21.423
다른 객체들과 말이죠
0:01:21.423,0:01:23.643
예를 들어 동물 왕국에서는
0:01:23.643,0:01:28.212
모든 동물은 비슷한 특성을 갖고 있습니다[br]하지만 서로 다른 동물 종이 있지요
0:01:28.212,0:01:31.588
인간과 같이 말이죠[br]인간은 동물이라는 점에서 유사성을 띄고 있지만
0:01:31.588,0:01:34.331
인간 고유의 특성을 가지고 있습니다
0:01:34.352,0:01:34.951
그래서
0:01:34.951,0:01:41.393
animal 타입은 human 타입에서[br]상속하는 객체 타입입니다
0:01:41.911,0:01:46.864
주석으로 시작할게요[br]우리는 animal 에 속해 있죠
0:01:46.864,0:01:49.196
모든 동물은 소리를 내죠
0:01:49.196,0:01:51.407
인간도 언어를 구사하죠
0:01:51.407,0:01:54.673
그래서 객체 상속의 개념은
0:01:54.673,0:01:56.695
프로그래밍할 때 유용합니다
0:01:56.695,0:01:59.865
여러 객체 상속을 자바스크립트에서[br]구현할 수 있습니다
0:01:59.865,0:02:02.529
그래서 이제 생각해야 될 것은
0:02:02.529,0:02:04.425
'객체 타입으로 공유할 특성이 무엇인가' 입니다
0:02:04.425,0:02:06.633
그리고 그것의 이름도 생각해 봅시다
0:02:06.633,0:02:08.675
새로운 객체타입을 만들 것이고
0:02:08.675,0:02:10.576
기존의 객체를 대표해야 합니다
0:02:10.576,0:02:12.094
그들을 이제 creature 이라고 합시다
0:02:12.094,0:02:13.873
그들은 모두 생명체입니다
0:02:13.873,0:02:17.831
var creature = 이고요[br]생성자도 필요하겠죠
0:02:17.831,0:02:22.342
호퍼와 윈스턴의 생성자의 내용을 복사합시다
0:02:22.342,0:02:23.762
좋아요
0:02:23.762,0:02:27.172
그러면 봅시다
0:02:27.172,0:02:28.135
이제
0:02:28.135,0:02:29.506
이제 뭘해야죠?
0:02:29.506,0:02:31.966
이제 "talk" 함수를 추가합시다
0:02:31.966,0:02:39.303
talk 함수는 호퍼에서 가져옵시다[br]물론 Creature.prototype 으로 고치고요
0:02:39.303,0:02:41.683
좋아요
0:02:41.683,0:02:45.300
이제 생명체 객체 타입을 만들었어요
0:02:45.300,0:02:47.810
그러면 우리는 이제 호퍼도 생명체라는
0:02:47.810,0:02:52.181
creature 객체임을 밝혀주어야 합니다
0:02:54.417,0:02:55.701
여기에다가 적어줄게요
0:02:56.310,0:03:04.404
Hopper.prototype = Object.create(Creature.prototype)
0:03:04.977,0:03:14.197
이 줄이 의미하는 것은 호퍼의 프로토타입이[br]생명체 프로토타입에 바탕이 된다는 것입니다
0:03:14.197,0:03:22.342
이제 호퍼의 함수를 호출할 때마다[br]호퍼 프로토타입에서 먼저 검색하지만
0:03:22.342,0:03:26.429
없다면 생명체 프로토타입에서 찾아볼 것입니다
0:03:26.429,0:03:29.196
이것을 프로토타입 체인이라고 합니다
0:03:29.196,0:03:34.032
이것을 했다면 기존의 talk 함수는[br]지워버려도 되겠죠?
0:03:34.032,0:03:35.634
호퍼에서 말이죠
0:03:35.634,0:03:38.302
이제 생명체 객체 타입에도 있으니깐요
0:03:38.302,0:03:40.231
이 함수는 프로토타입 체인으로 있겠죠
0:03:41.847,0:03:42.541
오호라
0:03:42.541,0:03:43.504
됐어요!
0:03:43.755,0:03:48.161
생명체 프로토타입이 호출되어서 실행이 됐어요
0:03:49.006,0:03:51.864
이제 윈스턴 것도 지워볼게요
0:03:53.869,0:03:57.680
talk라는 메소드가 없어서 오류가 나네요
0:03:57.680,0:04:01.263
왜 그럴까요?[br]윈스턴 생성자도 있고
0:04:01.263,0:04:03.517
draw 도 있는데 talk 만 없어요
0:04:03.517,0:04:07.924
윈스턴의 프로토타입이 생명체 프로토타입이
0:04:07.924,0:04:09.409
되어야하는 것을 깜빡했네요
0:04:09.409,0:04:10.711
매우 중요한 문장이예요
0:04:10.711,0:04:15.162
Winston.prototype = Object.create(Creature.prototype)
0:04:18.139,0:04:19.290
짜잔!
0:04:19.290,0:04:20.426
중요한 거예요
0:04:20.426,0:04:26.097
생성자 바로 뒤에 이 문장을 썼고[br]프로토타입에 무엇인가를 추가하기 전에 썼어요
0:04:27.130,0:04:29.334
보통 이런 식으로 하게 됩니다
0:04:29.334,0:04:31.230
시작할 때에는
0:04:31.230,0:04:33.860
프로토타입이 상속되어 있는 곳을 씁니다
0:04:33.860,0:04:36.804
그리고 나서야 프로토타입에 추가할 수 있습니다
0:04:36.804,0:04:41.673
왜냐하면 만약에 윈스턴이나 호퍼에게[br]특별한 것이 있다면
0:04:41.673,0:04:43.909
생명체 프로토타입에는 없어야죠
0:04:43.909,0:04:46.133
그리고 이들을 사용하므로써 좋아졌네요
0:04:48.307,0:04:50.256
근데 아직 반복되는 코드가 남아있어요
0:04:50.256,0:04:51.524
생성자 코드입니다
0:04:51.524,0:04:53.366
맞죠? 3번이나 있어요
0:04:53.366,0:04:57.032
그냥 지우면 안 될까요?
0:04:58.024,0:04:59.512
해봅시다
0:05:00.439,0:05:03.509
음.. 별로 좋아보이지는 않네요
0:05:03.509,0:05:07.340
호퍼가 좌측상단에 있고요[br]자신의 정보가 모두 사라졌어요
0:05:07.340,0:05:15.264
자바스크립트에서 프로토타입을 상속하더라도[br]같은 생성자를 쓸 수는 없기 때문이예요
0:05:15.264,0:05:19.359
그러면 이런 객체들을 위한 생성자를 정의해봅시다
0:05:19.359,0:05:25.905
객체에서 생성자를 부르기 쉽도록 말이죠
0:05:26.235,0:05:28.069
우리가 해야될 것은
0:05:28.170,0:05:35.470
Creature.call(this, nickname, age, x, y)
0:05:35.470,0:05:40.598
실행되었네요[br]이것이 뜻하는 바는 바로
0:05:40.598,0:05:43.679
creature의 생성자 함수를 부르는 것입니다
0:05:43.679,0:05:50.339
이 함수를 부르면 생성자 함수에 넣고 싶은 정보를[br]전달이 되고
0:05:50.339,0:05:53.764
마치 호퍼 객체의 생성자인 듯이 호출됩니다
0:05:53.764,0:05:56.968
그리고 괄호 안에 있는 인자가 전달이 됩니다
0:05:56.968,0:05:59.427
이 인자들은 아까 호퍼가 호출받은 정보들입니다
0:05:59.427,0:06:03.589
마치 위의 생성자가 호퍼 속에 있는 것처럼 됩니다
0:06:03.589,0:06:07.025
이것이 우리가 원하는 바입니다[br]실행됐어요
0:06:07.281,0:06:08.258
이제 우리는
0:06:08.258,0:06:14.141
이 문장을 윈스턴에도 붙여넣읍시다
0:06:15.537,0:06:16.531
성공했어요!
0:06:16.531,0:06:24.901
정리해볼게요 우리는 공유된 속성과 함수를[br]creature라는 하나의 객체 타입에 넣었어요
0:06:24.901,0:06:28.207
그리고 이것을 바탕으로 2개의[br]객체 타입을 만들었고요
0:06:28.207,0:06:30.981
이들은 몇 개의 함수를 상속받지만[br]그들만의 함수도 있습니다
0:06:30.981,0:06:36.339
주목해야 할 점은 공유된 특성을 한 곳에서[br]수정할 수 있다는 점입니다
0:06:36.339,0:06:40.302
만약에 age를 바꾸고 싶다면[br]여기에 "+ years old" 써주면
0:06:40.302,0:06:43.908
모두 끝에 years old 가 붙을 거예요
0:06:43.908,0:06:52.151
아니면 talk 함수에 "sup"을 대입시키면[br]이제 윈스턴과 호퍼도 "sup"을 외칠 거예요
0:06:53.648,0:06:57.174
이제 당신은 기본 객체 타입으로부터 상속시켜[br]새로운 객체 타입을 만드는 방법을 알게 되었습니다
0:06:57.174,0:07:01.348
여러분은 '상속'이 그림, 애니메이션, 시뮬레이션 및 게임에[br]유용하게 이용될 수 있음을 알 수 있어요
0:07:01.348,0:07:05.257
예를 들어 게임을 생각해보면[br]상당히 많은 종류의 캐릭터가 있어요
0:07:05.257,0:07:07.683
전부 뛸 수는 있지만 몇 명은 점프를 못합니다
0:07:07.683,0:07:11.970
이런 예에서 상속을 적용한다면 아주 쉽게 구현할 수 있지요
0:07:11.970,0:07:15.970
여러분은 이것 말고도 적용방안을 생각해 낼 수 있을 것이라 믿습니다