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