Return to Video

Object Types (Video Version)

  • 0:01 - 0:06
    이제 자바스크립트의 기초를 모두 다졌으니
    제가 이것을 활용한 멋진 것들을 소개할게요
  • 0:06 - 0:09
    "객체지향 프로그래밍"을 말이지요
  • 0:10 - 0:12
    하지만 먼저 왜 유용한지부터 알아야 합니다
  • 0:13 - 0:17
    그래서 객체지향 프로그램이 되면 좋을 것 같은
    프로그램을 준비했어요
  • 0:18 - 0:24
    시작하기 되게 좋은 프로그램이예요
    간단한 리터럴을 저장하는 두 개의 변수가 있어요
  • 0:25 - 0:30
    전에 배웠듯이 리터럴은
    두 개의 중괄호로 나타내고요
  • 0:30 - 0:33
    안에 속성의 이름과 값들을 적어줍니다
  • 0:34 - 0:39
    두 개의 객체 리터럴하고
    밑에 drawWinston 함수도 있습니다
  • 0:39 - 0:41
    1개의 매개변수 함수지요
  • 0:41 - 0:48
    매개변수를 통해 이미지를
    알맞는 x좌표 y좌표에 출력합니다
  • 0:48 - 0:53
    닉네임과 나이를 포함한 캡션
    또한 생성합니다
  • 0:53 - 0:58
    그리고 밑에서 우리는 drawWinston()이라는 함수를
    teenadult에 대해 호출합니다
  • 0:58 - 1:01
    그래서 다음과 같이 출력됩니다
  • 1:01 - 1:06
    좋네요 이제 리터럴을 보면
  • 1:06 - 1:11
    뭔가 되게 비슷하다는 것을 눈치 채셨을 거예요
  • 1:11 - 1:17
    서로 비슷한 속성을 가지고 있고요
    둘다 drawWinston() 함수에 쓰입니다
  • 1:18 - 1:24
    생각해보면, 둘 다 윈스턴의
    타입을 기술하는 거죠?
  • 1:24 - 1:29
    그리고 우리는 윈스턴을 기술하는
    추상적인 타입도 생각할 수 있겠죠?
  • 1:29 - 1:36
    모든 윈스턴은 닉네임과 나이 그리고
    xy 좌표를 가지고 있어야 합니다
  • 1:36 - 1:42
    여기 우리는 2개의 윈스턴의 인스턴스를
    생성했어요
  • 1:42 - 1:48
    윈스턴을 표현하기 위해서는
    여기 십대의 윈스턴과 성인 윈스턴이 있잖아요.
  • 1:48 - 1:55
    서로 서로 닮은 것들이 너무 많아요
  • 1:55 - 2:01
    그렇게 생각한다면 인간, 사람이라는
    추상 자료형도 생각해볼 수 있겠죠?
  • 2:01 - 2:06
    그럼 우리 모두는 우리만의 속성을 가진 인스턴스에 불과합니다
  • 2:06 - 2:15
    이제 우리는 객체 지향 프로그래밍을 해볼텐데요
    윈스턴 변수들을
  • 2:15 - 2:22
    윈스턴 객체의 인스턴스로 표현해서
    비슷한 속성을 공유하게 하려고 해요
  • 2:22 - 2:28
    그러기 위해서 우리는 윈스턴 추상 자료형을 정의해야 돼요
  • 2:28 - 2:31
    이제 변수를 만들게요
  • 2:31 - 2:39
    이 안에 자료형을 저장해야겠죠? var Winston이라 할게요
    보통 객체 타입으로 첫문자는 대문자로 씁니다
  • 2:39 - 2:42
    함수랑 같다고 둘게요
  • 2:42 - 2:47
    이 함수를 특별하게 "생성자 함수"라고 부릅니다
  • 2:47 - 2:52
    왜냐하면 이 함수가 호출될 때마다
    윈스턴 인스턴스가 생기니까요
  • 2:52 - 2:58
    teenageWinston을 생성하고 싶거나
    adultWinston을 생성하고 싶으면 호출하면 되겠죠
  • 2:58 - 3:06
    그럼 이 함수가 속성에 관한 정보를 전달 받아야만이
    완벽한 윈스턴을 만들 수 있겠죠?
  • 3:06 - 3:11
    이 경우에는 nickname, age, x, y이겠죠
  • 3:11 - 3:15
    인수가 전달되고 나서 우리는 이걸로 뭔가 해야겠죠
  • 3:15 - 3:21
    윈스턴 객체에 정보를 넣어주어야 합니다
  • 3:21 - 3:29
    그래서 새로운 수식어 "this" 를 쓸게요
    "this" 는 현재의 인스턴스를 의미합니다
  • 3:29 - 3:35
    그러면 this.nickname, 즉 이번 객체의 닉네임 속성에는
  • 3:35 - 3:38
    생성자로부터 전달받은 값을 넣어주어야 합니다
  • 3:38 - 3:44
    this.age = age
    this.x = x 그리고
  • 3:44 - 3:47
    this.y = y 이면 되겠죠?
  • 3:48 - 3:58
    그럼 우리는 윈스턴이라고 부르는 추상 자료형을 만들었고요
    이 자료형은 새로운 윈스턴을 만들기 위한 생성자가 있어요
  • 3:58 - 4:00
    이걸 이용해 볼게요
  • 4:00 - 4:05
    winstonTeen을 다시 만들건데요
    이번에는 winstonTeen =
  • 4:05 - 4:10
    중괄호 대신에 = new Winston 이라 할게요
  • 4:10 - 4:14
    "이제 새로운 윈스턴 인스턴스를 만든다"라는 뜻이예요
  • 4:14 - 4:22
    여기에 정보를 전달해야 되므로,
    "Winsteen", 15, 20, 50 로 쓸게요
  • 4:22 - 4:28
    전에 썼던 것은 지워버리고요
  • 4:28 - 4:31
    이제 윈스틴이 만들어졌죠?
  • 4:31 - 4:36
    이제 winstonAdult = new Winston()
  • 4:36 - 4:40
    이름은 "Mr. Winst-a-lot"이고요,
  • 4:40 - 4:47
    30, 229, 50을 차례로 넣을게요
    전에 리터럴은 지워버리고요
  • 4:47 - 4:51
    짜잔 제대로 작동하네요
  • 4:51 - 4:58
    아직까지 우리가 한 것을 정리해볼게요
    우리가 만든 윈스턴 추상자료형이고요
  • 4:58 - 5:05
    자기자신만의 속성을 가지고 새로운
    윈스턴 인스턴스를 만들었어요
  • 5:05 - 5:09
    그리고 전달받은 속성을 생성자로 다시 대입 시켰죠
  • 5:09 - 5:14
    외워야 합니다 this.nicknamethis.age에서
  • 5:14 - 5:20
    만약에 this.age 대입문을 안썼다면 "정의 안됨" 오류가 날 거예요
  • 5:20 - 5:23
    왜냐하면 밑에 drawWinston 함수에서
  • 5:23 - 5:28
    winston에 나이 속성이 있어야 하기 때문이죠
  • 5:28 - 5:31
    다시 말해서, this.age를 안썼다면
  • 5:31 - 5:34
    나이 속성이 없는 거지요
    생성자로 전달 받긴 했는데
  • 5:34 - 5:39
    그것으로 아무것도 안했잖아요
    this를 이용해 객체에 대입해야 합니다.
  • 5:39 - 5:41
    여기에 덧붙여서 말하자면,
  • 5:41 - 5:46
    여러분은 아마 이렇게 생각할지도 몰라요
    "코드가 작동하는 군. 그냥 멋지네"
  • 5:46 - 5:51
    "전에 했던 거랑 똑같네"
  • 5:51 - 5:56
    하지만 이제 모든 윈스턴이 같은 생성자에 들어간다는 겁니다
  • 5:56 - 6:01
    만약에 윈스턴에서 뭔가를 고치면
  • 6:01 - 6:07
    모든 윈스턴들이 다 고쳐집니다
    예를 들어 나이 뒤에 "years old"라 하면
  • 6:07 - 6:13
    여기만 바꿨는데, 모든 윈스턴 뒤에
    "years old"가 붙어요
  • 6:13 - 6:17
    인스턴스만의 속성에 공통적인 속성도 공유할 수 있다는 것이지요
  • 6:17 - 6:21
    이것이 바로 객체 지향 프로그래밍 만의 장점이지요
  • 6:21 - 6:27
    여러 종류의 객체가 있을 때 이것을 인스턴스로 만들 수 있고,
  • 6:27 - 6:30
    이 객체들이 서로 같은 속성이 있다면
  • 6:30 - 6:36
    뭔가가 다를 때 이 속성은 저 속성과는 다르다는 것을
    쉽게 알 수 있겠죠?
  • 6:36 - 6:41
    그게 아니라 속성이 서로 비슷하다면,
    서로 공유하는 함수를 만들어
  • 6:41 - 6:46
    비슷하게 이용하면 될 것입니다
    이것이 바로 객체지향 프로그래밍의 장점의 일부고요
  • 6:46 - 6:49
    이것 말고도 좋은 점은 무척 많답니다
  • 6:49 - 6:51
    다음에 만나요!
Title:
Object Types (Video Version)
Description:

more » « less
Video Language:
English
Duration:
06:51

Korean subtitles

Incomplete

Revisions Compare revisions