[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.04,0:00:03.17,Default,,0000,0000,0000,,윈스턴 생성 프로그램을 가지고 시작할게요
Dialogue: 0,0:00:03.17,0:00:06.18,Default,,0000,0000,0000,,새로운 개체 타입 Hopper를 추가했어요
Dialogue: 0,0:00:06.18,0:00:11.92,Default,,0000,0000,0000,,호퍼가 외로워보였어요\N그래서 윈스턴이랑 똑같이 정의를 했어요
Dialogue: 0,0:00:11.92,0:00:15.84,Default,,0000,0000,0000,,생성자를 이용하여 특성을 정의할 수 있고요\N그릴 수도 있으며
Dialogue: 0,0:00:15.84,0:00:20.32,Default,,0000,0000,0000,,말할 수도 있고요\N제가 이번에 새롭게 추가한
Dialogue: 0,0:00:20.32,0:00:22.84,Default,,0000,0000,0000,,Horray입니다\N호퍼는 축하하는 것을 좋아하는데 반면
Dialogue: 0,0:00:22.85,0:00:27.92,Default,,0000,0000,0000,,윈스턴은 그렇지 않죠\N그리고 밑부분에는 Hopper 객체를 2개 생성하였습니다
Dialogue: 0,0:00:27.92,0:00:31.17,Default,,0000,0000,0000,,Little Hopper와 Big Hopper로 말이죠
Dialogue: 0,0:00:31.17,0:00:35.67,Default,,0000,0000,0000,,이들을 그리고 말도 할 수 있고\N만세도 할 수 있게 해줬어요
Dialogue: 0,0:00:36.40,0:00:37.43,Default,,0000,0000,0000,,괜찮네요
Dialogue: 0,0:00:37.43,0:00:39.93,Default,,0000,0000,0000,,여기 코드를 보면요
Dialogue: 0,0:00:39.93,0:00:41.82,Default,,0000,0000,0000,,흥미로운 것을 발견할 수 있습니다
Dialogue: 0,0:00:41.97,0:00:52.32,Default,,0000,0000,0000,,호퍼와 윈스턴의 코드가 유사하다는 것을 말이죠\N생성자를 보면 {\i1}talk{\i0} 함수가
Dialogue: 0,0:00:52.32,0:01:00.75,Default,,0000,0000,0000,,예전에 우리가 썼던 윈스턴의\N{\i1}talk{\i0} 함수와 똑같다는 것을 알 수 있습니다
Dialogue: 0,0:01:00.76,0:01:03.90,Default,,0000,0000,0000,,그리고 같은 {\i1}draw{\i0} 함수를 갖고 있고요
Dialogue: 0,0:01:03.90,0:01:07.92,Default,,0000,0000,0000,,이 두 객체타입에는 공통점이 많습니다
Dialogue: 0,0:01:07.92,0:01:12.36,Default,,0000,0000,0000,,이 세계에서는 호퍼와 윈스턴이\N매우 비슷한 특성을 갖기 때문이죠
Dialogue: 0,0:01:13.09,0:01:17.14,Default,,0000,0000,0000,,컴퓨터 밖 실제 세계에서 생각해본다면
Dialogue: 0,0:01:17.64,0:01:20.01,Default,,0000,0000,0000,,대부분의 객체 타입들은 유사점들을\N공유하고 있을 것입니다
Dialogue: 0,0:01:20.01,0:01:21.42,Default,,0000,0000,0000,,다른 객체들과 말이죠
Dialogue: 0,0:01:21.42,0:01:23.64,Default,,0000,0000,0000,,예를 들어 동물 왕국에서는
Dialogue: 0,0:01:23.64,0:01:28.21,Default,,0000,0000,0000,,모든 동물은 비슷한 특성을 갖고 있습니다\N하지만 서로 다른 동물 종이 있지요
Dialogue: 0,0:01:28.21,0:01:31.59,Default,,0000,0000,0000,,인간과 같이 말이죠\N인간은 동물이라는 점에서 유사성을 띄고 있지만
Dialogue: 0,0:01:31.59,0:01:34.33,Default,,0000,0000,0000,,인간 고유의 특성을 가지고 있습니다
Dialogue: 0,0:01:34.35,0:01:34.95,Default,,0000,0000,0000,,그래서
Dialogue: 0,0:01:34.95,0:01:41.39,Default,,0000,0000,0000,,{\i1}animal{\i0} 타입은 {\i1}human{\i0} 타입에서\N상속하는 객체 타입입니다
Dialogue: 0,0:01:41.91,0:01:46.86,Default,,0000,0000,0000,,주석으로 시작할게요\N우리는 {\i1}animal{\i0} 에 속해 있죠
Dialogue: 0,0:01:46.86,0:01:49.20,Default,,0000,0000,0000,,모든 동물은 소리를 내죠
Dialogue: 0,0:01:49.20,0:01:51.41,Default,,0000,0000,0000,,인간도 언어를 구사하죠
Dialogue: 0,0:01:51.41,0:01:54.67,Default,,0000,0000,0000,,그래서 객체 상속의 개념은
Dialogue: 0,0:01:54.67,0:01:56.70,Default,,0000,0000,0000,,프로그래밍할 때 유용합니다
Dialogue: 0,0:01:56.70,0:01:59.86,Default,,0000,0000,0000,,여러 객체 상속을 자바스크립트에서\N구현할 수 있습니다
Dialogue: 0,0:01:59.86,0:02:02.53,Default,,0000,0000,0000,,그래서 이제 생각해야 될 것은
Dialogue: 0,0:02:02.53,0:02:04.42,Default,,0000,0000,0000,,'객체 타입으로 공유할 특성이 무엇인가' 입니다
Dialogue: 0,0:02:04.42,0:02:06.63,Default,,0000,0000,0000,,그리고 그것의 이름도 생각해 봅시다
Dialogue: 0,0:02:06.63,0:02:08.68,Default,,0000,0000,0000,,새로운 객체타입을 만들 것이고
Dialogue: 0,0:02:08.68,0:02:10.58,Default,,0000,0000,0000,,기존의 객체를 대표해야 합니다
Dialogue: 0,0:02:10.58,0:02:12.09,Default,,0000,0000,0000,,그들을 이제 {\i1}creature{\i0} 이라고 합시다
Dialogue: 0,0:02:12.09,0:02:13.87,Default,,0000,0000,0000,,그들은 모두 생명체입니다
Dialogue: 0,0:02:13.87,0:02:17.83,Default,,0000,0000,0000,,{\i1}var creature = {\i0} 이고요\N생성자도 필요하겠죠
Dialogue: 0,0:02:17.83,0:02:22.34,Default,,0000,0000,0000,,호퍼와 윈스턴의 생성자의 내용을 복사합시다
Dialogue: 0,0:02:22.34,0:02:23.76,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:02:23.76,0:02:27.17,Default,,0000,0000,0000,,그러면 봅시다
Dialogue: 0,0:02:27.17,0:02:28.14,Default,,0000,0000,0000,,이제
Dialogue: 0,0:02:28.14,0:02:29.51,Default,,0000,0000,0000,,이제 뭘해야죠?
Dialogue: 0,0:02:29.51,0:02:31.97,Default,,0000,0000,0000,,이제 {\i1}"talk"{\i0} 함수를 추가합시다
Dialogue: 0,0:02:31.97,0:02:39.30,Default,,0000,0000,0000,,{\i1}talk{\i0} 함수는 호퍼에서 가져옵시다\N물론 {\i1}Creature.prototype{\i0} 으로 고치고요
Dialogue: 0,0:02:39.30,0:02:41.68,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:02:41.68,0:02:45.30,Default,,0000,0000,0000,,이제 생명체 객체 타입을 만들었어요
Dialogue: 0,0:02:45.30,0:02:47.81,Default,,0000,0000,0000,,그러면 우리는 이제 호퍼도 생명체라는
Dialogue: 0,0:02:47.81,0:02:52.18,Default,,0000,0000,0000,,{\i1}creature{\i0} 객체임을 밝혀주어야 합니다
Dialogue: 0,0:02:54.42,0:02:55.70,Default,,0000,0000,0000,,여기에다가 적어줄게요
Dialogue: 0,0:02:56.31,0:03:04.40,Default,,0000,0000,0000,,{\i1}Hopper.prototype = Object.create(Creature.prototype){\i0}
Dialogue: 0,0:03:04.98,0:03:14.20,Default,,0000,0000,0000,,이 줄이 의미하는 것은 호퍼의 프로토타입이\N생명체 프로토타입에 바탕이 된다는 것입니다
Dialogue: 0,0:03:14.20,0:03:22.34,Default,,0000,0000,0000,,이제 호퍼의 함수를 호출할 때마다\N호퍼 프로토타입에서 먼저 검색하지만
Dialogue: 0,0:03:22.34,0:03:26.43,Default,,0000,0000,0000,,없다면 생명체 프로토타입에서 찾아볼 것입니다
Dialogue: 0,0:03:26.43,0:03:29.20,Default,,0000,0000,0000,,이것을 프로토타입 체인이라고 합니다
Dialogue: 0,0:03:29.20,0:03:34.03,Default,,0000,0000,0000,,이것을 했다면 기존의 {\i1}talk{\i0} 함수는\N지워버려도 되겠죠?
Dialogue: 0,0:03:34.03,0:03:35.63,Default,,0000,0000,0000,,호퍼에서 말이죠
Dialogue: 0,0:03:35.63,0:03:38.30,Default,,0000,0000,0000,,이제 생명체 객체 타입에도 있으니깐요
Dialogue: 0,0:03:38.30,0:03:40.23,Default,,0000,0000,0000,,이 함수는 프로토타입 체인으로 있겠죠
Dialogue: 0,0:03:41.85,0:03:42.54,Default,,0000,0000,0000,,오호라
Dialogue: 0,0:03:42.54,0:03:43.50,Default,,0000,0000,0000,,됐어요!
Dialogue: 0,0:03:43.76,0:03:48.16,Default,,0000,0000,0000,,생명체 프로토타입이 호출되어서 실행이 됐어요
Dialogue: 0,0:03:49.01,0:03:51.86,Default,,0000,0000,0000,,이제 윈스턴 것도 지워볼게요
Dialogue: 0,0:03:53.87,0:03:57.68,Default,,0000,0000,0000,,{\i1}talk{\i0}라는 메소드가 없어서 오류가 나네요
Dialogue: 0,0:03:57.68,0:04:01.26,Default,,0000,0000,0000,,왜 그럴까요?\N윈스턴 생성자도 있고
Dialogue: 0,0:04:01.26,0:04:03.52,Default,,0000,0000,0000,,{\i1}draw{\i0} 도 있는데 {\i1}talk{\i0} 만 없어요
Dialogue: 0,0:04:03.52,0:04:07.92,Default,,0000,0000,0000,,윈스턴의 프로토타입이 생명체 프로토타입이
Dialogue: 0,0:04:07.92,0:04:09.41,Default,,0000,0000,0000,,되어야하는 것을 깜빡했네요
Dialogue: 0,0:04:09.41,0:04:10.71,Default,,0000,0000,0000,,매우 중요한 문장이예요
Dialogue: 0,0:04:10.71,0:04:15.16,Default,,0000,0000,0000,,{\i1}Winston.prototype = Object.create(Creature.prototype){\i0}
Dialogue: 0,0:04:18.14,0:04:19.29,Default,,0000,0000,0000,,짜잔!
Dialogue: 0,0:04:19.29,0:04:20.43,Default,,0000,0000,0000,,중요한 거예요
Dialogue: 0,0:04:20.43,0:04:26.10,Default,,0000,0000,0000,,생성자 바로 뒤에 이 문장을 썼고\N프로토타입에 무엇인가를 추가하기 전에 썼어요
Dialogue: 0,0:04:27.13,0:04:29.33,Default,,0000,0000,0000,,보통 이런 식으로 하게 됩니다
Dialogue: 0,0:04:29.33,0:04:31.23,Default,,0000,0000,0000,,시작할 때에는
Dialogue: 0,0:04:31.23,0:04:33.86,Default,,0000,0000,0000,,프로토타입이 상속되어 있는 곳을 씁니다
Dialogue: 0,0:04:33.86,0:04:36.80,Default,,0000,0000,0000,,그리고 나서야 프로토타입에 추가할 수 있습니다
Dialogue: 0,0:04:36.80,0:04:41.67,Default,,0000,0000,0000,,왜냐하면 만약에 윈스턴이나 호퍼에게\N특별한 것이 있다면
Dialogue: 0,0:04:41.67,0:04:43.91,Default,,0000,0000,0000,,생명체 프로토타입에는 없어야죠
Dialogue: 0,0:04:43.91,0:04:46.13,Default,,0000,0000,0000,,그리고 이들을 사용하므로써 좋아졌네요
Dialogue: 0,0:04:48.31,0:04:50.26,Default,,0000,0000,0000,,근데 아직 반복되는 코드가 남아있어요
Dialogue: 0,0:04:50.26,0:04:51.52,Default,,0000,0000,0000,,생성자 코드입니다
Dialogue: 0,0:04:51.52,0:04:53.37,Default,,0000,0000,0000,,맞죠? 3번이나 있어요
Dialogue: 0,0:04:53.37,0:04:57.03,Default,,0000,0000,0000,,그냥 지우면 안 될까요?
Dialogue: 0,0:04:58.02,0:04:59.51,Default,,0000,0000,0000,,해봅시다
Dialogue: 0,0:05:00.44,0:05:03.51,Default,,0000,0000,0000,,음.. 별로 좋아보이지는 않네요
Dialogue: 0,0:05:03.51,0:05:07.34,Default,,0000,0000,0000,,호퍼가 좌측상단에 있고요\N자신의 정보가 모두 사라졌어요
Dialogue: 0,0:05:07.34,0:05:15.26,Default,,0000,0000,0000,,자바스크립트에서 프로토타입을 상속하더라도\N같은 생성자를 쓸 수는 없기 때문이예요
Dialogue: 0,0:05:15.26,0:05:19.36,Default,,0000,0000,0000,,그러면 이런 객체들을 위한 생성자를 정의해봅시다
Dialogue: 0,0:05:19.36,0:05:25.90,Default,,0000,0000,0000,,객체에서 생성자를 부르기 쉽도록 말이죠
Dialogue: 0,0:05:26.24,0:05:28.07,Default,,0000,0000,0000,,우리가 해야될 것은
Dialogue: 0,0:05:28.17,0:05:35.47,Default,,0000,0000,0000,,{\i1}Creature.call(this, nickname, age, x, y){\i0}
Dialogue: 0,0:05:35.47,0:05:40.60,Default,,0000,0000,0000,,실행되었네요\N이것이 뜻하는 바는 바로
Dialogue: 0,0:05:40.60,0:05:43.68,Default,,0000,0000,0000,,{\i1}creature{\i0}의 생성자 함수를 부르는 것입니다
Dialogue: 0,0:05:43.68,0:05:50.34,Default,,0000,0000,0000,,이 함수를 부르면 생성자 함수에 넣고 싶은 정보를\N전달이 되고
Dialogue: 0,0:05:50.34,0:05:53.76,Default,,0000,0000,0000,,마치 호퍼 객체의 생성자인 듯이 호출됩니다
Dialogue: 0,0:05:53.76,0:05:56.97,Default,,0000,0000,0000,,그리고 괄호 안에 있는 인자가 전달이 됩니다
Dialogue: 0,0:05:56.97,0:05:59.43,Default,,0000,0000,0000,,이 인자들은 아까 호퍼가 호출받은 정보들입니다
Dialogue: 0,0:05:59.43,0:06:03.59,Default,,0000,0000,0000,,마치 위의 생성자가 호퍼 속에 있는 것처럼 됩니다
Dialogue: 0,0:06:03.59,0:06:07.02,Default,,0000,0000,0000,,이것이 우리가 원하는 바입니다\N실행됐어요
Dialogue: 0,0:06:07.28,0:06:08.26,Default,,0000,0000,0000,,이제 우리는
Dialogue: 0,0:06:08.26,0:06:14.14,Default,,0000,0000,0000,,이 문장을 윈스턴에도 붙여넣읍시다
Dialogue: 0,0:06:15.54,0:06:16.53,Default,,0000,0000,0000,,성공했어요!
Dialogue: 0,0:06:16.53,0:06:24.90,Default,,0000,0000,0000,,정리해볼게요 우리는 공유된 속성과 함수를\N{\i1}creature{\i0}라는 하나의 객체 타입에 넣었어요
Dialogue: 0,0:06:24.90,0:06:28.21,Default,,0000,0000,0000,,그리고 이것을 바탕으로 2개의\N객체 타입을 만들었고요
Dialogue: 0,0:06:28.21,0:06:30.98,Default,,0000,0000,0000,,이들은 몇 개의 함수를 상속받지만\N그들만의 함수도 있습니다
Dialogue: 0,0:06:30.98,0:06:36.34,Default,,0000,0000,0000,,주목해야 할 점은 공유된 특성을 한 곳에서\N수정할 수 있다는 점입니다
Dialogue: 0,0:06:36.34,0:06:40.30,Default,,0000,0000,0000,,만약에 {\i1}age{\i0}를 바꾸고 싶다면\N여기에 {\i1}"+ years old"{\i0} 써주면
Dialogue: 0,0:06:40.30,0:06:43.91,Default,,0000,0000,0000,,모두 끝에 {\i1}years old{\i0} 가 붙을 거예요
Dialogue: 0,0:06:43.91,0:06:52.15,Default,,0000,0000,0000,,아니면 {\i1}talk{\i0} 함수에 "sup"을 대입시키면\N이제 윈스턴과 호퍼도 "sup"을 외칠 거예요
Dialogue: 0,0:06:53.65,0:06:57.17,Default,,0000,0000,0000,,이제 당신은 기본 객체 타입으로부터 상속시켜\N새로운 객체 타입을 만드는 방법을 알게 되었습니다
Dialogue: 0,0:06:57.17,0:07:01.35,Default,,0000,0000,0000,,여러분은 '상속'이 그림, 애니메이션, 시뮬레이션 및 게임에\N유용하게 이용될 수 있음을 알 수 있어요
Dialogue: 0,0:07:01.35,0:07:05.26,Default,,0000,0000,0000,,예를 들어 게임을 생각해보면\N상당히 많은 종류의 캐릭터가 있어요
Dialogue: 0,0:07:05.26,0:07:07.68,Default,,0000,0000,0000,,전부 뛸 수는 있지만 몇 명은 점프를 못합니다
Dialogue: 0,0:07:07.68,0:07:11.97,Default,,0000,0000,0000,,이런 예에서 상속을 적용한다면 아주 쉽게 구현할 수 있지요
Dialogue: 0,0:07:11.97,0:07:15.97,Default,,0000,0000,0000,,여러분은 이것 말고도 적용방안을 생각해 낼 수 있을 것이라 믿습니다