JavaScript 입문 : 객체를 가리키는 this - 확실하게 개념 익히기 (2)

 

현재까지 이해한 this를 다시한번 3가지 정리를 해 보겠습니다. 

 

① this는 객체를 가리키는 지시대명사이고 키워드이다. 

② this는 그래서 호출한 키워드이고 호출이 없으면 전체를 나타내는 window를 지칭한다. 

    쉽게 보면 window는 브라우저 자체를 가리킨다 보면 됩니다. 

③ 대부분의 this값은 함수를 호출한 방법에 의해 결정된다.

 

상기 3가지를 이전시간 실습을 통하여 확인할 수 있었습니다. 좀 더 this에 대해 알고 가보자 합니다. 

 

역시 this의 정의공부는 짐코딩 강의를 통하여 참조하고 있습니다. 

 

1. 클릭이벤트를 통한 this 확인

 

클릭이벤트를 확인하기 위해서 HTML상 <button>태그를 만들고 <script>를 다음과 같이 작성해 보겠습니다. 

addEventListener(  )메소드를 통한 this는 무엇을 가리키는지 볼 예정입니다. 

 

 

브라우저를 보면 addEventListener(  ) 함수식에서 this는 호출되어진 키워드인 <button>요소를 가리키고 있습니다. 

 

 

상기 결과값을 유추해 보면 addEventListener(  )함수가 작동하기 위한 콜백함수인 function(  ) {   }는 $btn이라는 호출키워드에 의해 작동을 하거나 아니면 시스템상 addEventListener는 무조건 앞에 가리키고 있는 선택된 객체 태그를 나타낸다고 볼 수 있습니다. 

 

2. 객체변환 메소드 bind(  )

 

객체를 나만의 니즈에 의해 다른 객체로 바꾸고자 하는 경우가 있습니다. 이럴 경우 bind(  ) 메소드를 활용하여 바꿀 수 있습니다. 

 

다음 예제는 this가 window를 가리키지만 필요한 객체로 바꾸는 과정을 보여줍니다. 

 

 

상기와 같은 코드에서는 this는 window를 나타냅니다. 이 this를 객체를 가리키고자 바꾸는 과정은 다음과 같습니다. 

 

먼저 바꾸고자 하는 객체를 선언합니다. 

 

 

 

상기와 같은 코드에서는 호출한 키워드 없이 callThis1(  )의 함수를 호출하면 콘솔에는 city 객체가 표현됩니다. 

 

 

참고로 bind(  ) 메소드는 한번만 적용됩니다. 다른 객체로 바꾸고자 예를 들어 Busan으로 바꾸고자 다시 bind(  ) 메소드를 사용해도 먼저 사용된 Seoul로 표시됩니다. 

 

3. 객체호출시 사용되는 this

 

다시 헷갈리지 않도록 객체 내부에서 사용되는 this는 객체자신을 가리킵니다. 다음을 보면 이해가 될 겁니다.

 

 

상기 내용을 보면 this.name이나 fruit.name이나 같은 결과값인 apple을 나타내고 있습니다. 

 

4. setTimeout(  ) 메소드에서의 this

 

상기 3번의 예를 조금 더 추가해서 setTimeout(  ) 메소드를 활용하여 이 함수의 특징을 알아보도로 하겠습니다.

 

과일의 이름과 색상을 2초후 출력하고자 같은 방식을 사용했는데 결과값은 다르게 나옵니다. 

 

 

콘솔 결과값은 다음과 같이 나오네요. 

 

 

setTimeout(  ) 안에서 this가 무엇인지 한번 봐야겠습니다. 

 

 

setTimeout(  ) 안에서는 this는 window를 가리키네요. 이는 addEventListener(  ) 이 호출되는 키워드를 가리키는 약속처럼 setTimeout(  )은 시스템상 window를 가리킨다고 보면 됩니다. (외울 필요가 있습니다.)

 

다음과 같이 setTimeout(  ) 밖에서 콘솔에 찍어보면 fruit를 가리킵니다. 

 

 

 

그럼 setTimeout(  ) 메소드가 사용된 함수에서 객체로 접근하고자 하면 어떻게 해야할까요? 바로 bind(  ) 메소드를 이용하면 this가 fruit를 가리킬 수 있습니다. 

 

setTimeout(  ) 함수내 함수식을 괄호로 묶고 bind(  ) 메소드를 사용합니다. 그러면 this가 전부 fruit 객체로 바뀝니다.