Object Methods (Video Version)

저번 시간에는 객체 타입을 만들고 두 개의
윈스턴 객체를 만들었어요

생성자를 이용해서 초기화도 했죠

그리고 객체 타입은 속성에만 꼭 관련될 필요는 없어요

함수와 관련되어도 되지요
모든 속성이 내장되어 있는 객체를 생각해 보세요

사람과 같이 말이죠. 우린 키와 나이도 갖고 있지만
수면, 밥먹기, 프로그래밍과 같은 활동도 할 수 있어요

우린 이제 이런 객체 타입을 함수와 연관시키려고 해요

이 프로그램은 저번에 끝냈던 프로그램 그대로인데요
여기 함수가 있어요

drawWinston 두 개의 윈스턴 객체에서 모두 부른 함수예요
이러면 더 편하지 않을까요?

윈스턴 객체 타입으로 함수를 넣어버리면 말이예요
생각보다 쉬워요

생성자 밑에 Winston.prototype이라 쓸게요

프로토타입이라는 말을 처음 들어 볼 텐데요

프로토타입은 함수로써 표현한 객체의 특성입니다

즉, 모든 인스턴스들이 모두 이 함수를 갖게 됩니다

그럼 "prototype." 다음에 함수 이름을 쓰고요
여기서는 draw겠죠?

밑에 있는 drawWinston 코드를 가지고 와서

이 안에 넣을게요
지금 우리는 draw 함수를

윈스턴 프로토타입에 넣었어요
이제 윈스턴 타입 객체에서 언제든 draw 함수를 호출할 수 있을 거예요

이제 우리는 draw 함수를
winstonTeen과 winstonAdult에 대해 호출해야 됩니다

이런 식으로 함수를 만들면
객체에서도 호출을 할 수 있습니다

이런 함수를 정확한 명칭으로 "메소드"라고 부릅니다
저는 앞으로 메소드라고 부를게요

그러면 이건 "draw method" 겠죠?

전에 썼던 코드는 다 지워버리고
우리가 만든 함수를 호출할 수 있는지 확인해 봅시다

winstonTeen.draw()

오류가 나네요
winstObject가 정의가 안 되었습니다

winstObject 인수를 drawWinston에 전달하기 전에

지금은 전달되는 인수가 없으니까
이렇게 바꿔주면

봅시다 여기에 뭐가 전달되어야 하죠?
winstonTeen을 전달 할게요

실행되었어요 하지만 좀 이상하지 않나요?
객체 스스로 객체를 그리는데

객체 자체를 인수로 전달받고 있어요
불필요해 보이네요

맞아요 하지 않아도 되요 지워버릴게요
이제 생각해봅시다

객체 안에서 객체의 속성을 참조하려면 어떻게 해야죠?

글쎄요 전에 생성자에서 썼던 특별한 키워드
this를 기억하나요? 아~

이것(this)을 this로 바꾸면 어떨까요? (웃음)
winstObject를 this로 바꿔줍시다

우린 객체 안에 있으니까요
함수가 객체 안에서 구동되니,

현재 객체에서 자신을 부르기 위해서는
this를 써야 할 거예요

우린 this를 현재 객체의 모든 속성에 접근하기 위해 사용했어요

그리고 제대로 작동했어요
엄청 좋지 않나요?

이제 우리는 winstonAdult.draw()라고 쓸 수 있을 거예요

짜잔 객체에서 호출이 되기 때문에
winstonAdult 속성에 접근할 수 있어요

this라는 키워드가 되게 좋아보이지 않나요?
가끔씩 헷갈려도 말이지요

좋아요 이것도 재미 있었는데 다른 메소드도 새로 만들어 볼게요
윈스턴이 뭘 할 수 있을까요?

말을 합니다 그럼 우리는 Winston.prototype.talk를 쓰고요
이렇게 넣을수록 프로토타입에는 많은 메소드가 들어가 있겠죠?

이렇게 말합니다
"I'm Winston"

위치를 this.x+20 과 this.y+150 으로 할게요

알다시피 아무것도 일어나지 않았어요
내가 아직 함수를 호출하지 않았으니까요

teen이 말을 하도록 할게요 winstonTeen.talk()

나는 윈스턴이예요 짜잔
이제 winstonAdult.talk()

짜잔, 좋아요 이제 윈스턴 타입으로
속성에는 닉네임과

나이, x, y가 있고요
함수에는 메소드가 속성을 토대로 행동을 합니다

이제 우리는 윈스턴 인스턴스를 가능한 많이 만들고
어떠한 메소드든지 간에 호출할 수 있겠죠?

괜찮지 않나요?