this란 어떻게 사용하는가 1/2 (function invocation,Global,this.Methode)

this는 기본적으로 5가지의 패턴으로 이루어져 있다. 이 패턴을 기억하고 있는다면 디스가 어디서 어떻게 사용되는지 알 수 있을 것이다.

패턴에는 (Global, Function invocation, Methode, call of appay, construction mode)이 있다. 한 번에 끝내면 좋을 거 같은데 처음 쓰는 글이라 내용이 길어져 과연 한 번에 끝낼 수 있을지 잘 모르겠다....

 

먼저 Global Reference와 Function invocation 을 같이 설명하려 한다.

둘은 많이 비슷한점이 있다. 그건 바로 윈도우 객체라는 점이다.

 

그럼 윈도우가 무엇인가?

 

윈도우는 브라우저에서의  전역 객체이다. 이것만 들어서는 무슨 말인지 이해가 안 갈 수도(사실 안 가는 게 맞다...) 있다 사진을 토대로 한번 살펴보자

사진을 보면 전역 변수를 설정해 준 모습을 볼 수 있다. 이때 foo는 윈도우 객체의 하나의 key값으로 들어가게 되는 것이다

(그래도 헷갈린다면 콘솔창에 window를 쳐보면 더 깊게 알아볼 수 있을 것이다.)

 

window를 설명한 이유는 위 2가지 패턴이 윈도우(전역)을 불러오기 때문이다 이것도 간단한 예제를 살펴보면 저 쉽게 알 수 있다.

위 패턴들에서는 같은 곳. 즉 윈도우를 가리키게 된다.

쉽게 생각해서 전역에다 선언한 this와 function 은 window객체에 포함되게 되는 것이다.

위 패턴으로 보면 this는 지금 window를 가리키고 있다. 그걸 이용해 this가 a에 접 글 할 수 있는 모습을 보여준다.

(a를 풀어보면 window = {a: 38}이 되는 것이다.)

 

3번째 Methode (Dot Notation이라고 부르기도 한다)

 객체에 담긴 함수가 메서드 함수다. obj.foo() 부모 오브젝트가 된다. 딱 자기 부모만 가져오게 된다.(아직은 이해하기 힘들 수도...)

좀 쉽게 풀어서 말하면 부모 객체를 가리키는 것을 Methode라고 한다. 백견이 불여일행 이라고 한번 직접 쳐보도록 하자

여기서 test.func의 this는 그 부모인 test를 가리키게 된다. 

여기서 test.func()의 결괏값은 test.age 가 된다.

 

 

조금만 더 어렵게 꼬아보도록 하자

사진에 steve.foo는 함수 foo를 가리킨다. 그럼 steve.foo()의 결괏값이 어떻게 나올지 생각해보자

steve.foo()의 결괏값은 24가 된다. 여기서 왜?라고 생각하는 분이 있을 수도 있다 왜냐면 foo함수는 function invocation을 따라야 하는 게 아니냐고 생각할 수도 있기 때문이다 하지만 this의 중요한 점 중 하나는 '어디서'호출되었느냐 이다. 지금 호출은 steve에서 호출되고 있기 때문에 this는 steve.age가 되어 24가 된다.

 

사실 더 쉽게 생각하면 그냥 Methode를 이용할때는 dot앞에 객체가 디스가 된다고 보면 된다고 알고 있다. 그러나 위에 더 깊이 있는 방법으로 먼저 설명한 이유는 어떤 식으로 함수가 진행이 되는지 명확히 알아야 하기 때문이다.

 

지금 것 배운 Function invocation과 Methode, window를 이용해 작성한 코드이다

한번 직접 콘솔에 찍어서 결괏값을 얻어보는 게 좋을 거 같다. 

var age = 80;

var steve = {age: 30,
	 	foo: function bar (){
               console.log(this.age)
             }
};

var kim = {age: 20,
		   foo: steve.foo
          };
          
var foo = steve.foo;

steve.foo()
kim.foo()
foo()

결과 값

steve.foo() //30

kim.foo() //20

foo() //80  

 

위에서 본 내용을 잘 생각해본다면 쉽게 풀 수 있는 문제였다. 지금 3 개 하는데 2 시간이 걸렸다... 처음이라 그런가.. 다음 포스팅에는 나머지를 다 쓰도록 하겠다.

 

this라는 개념을 처음 접한 건 한 2주일쯤 전이었던 거 같다. 그때는 정말 하나도 모르겠다고 생각했는데 지금 보니 어느 정도 어떻게 결과 값이 나오고 동작하는지 정도는 알 수 있을 거 같다. 아직 갈 길이 너무 멀다.. codestates에서 공부를 시작한 지 벌써 5주 짼데 시간이 너무 빨리 가는 거 같다.. 이제 곧 하는 프로젝트가 너무 기대된다. 

 

Ps. 만약 틀린 점이 있다면 댓글로 알려주셨으면 해요! 저도 배우는 입장이라 제 글이 정확하진 않을 수 있습니다. 글 봐주셔서 감사합니다