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

코드를 따라하면 이해가 되기도 하는데 또 곰곰히 생각해 보면 도대체 자바스크립트상에서 this가 무엇일까하는 의문이 종종 듭니다. 이는 this를 이해하지 못했기 때문이라고 생각이 드네요. 

 

2022년 자바스크립트를 공부하면서 과거에 사용되었던 변수 앞 지정하는 'var'도 이제는 사용안한다고 하고 대신 새롭게 this라는 지정대명사(?)가 생겨나서 이 내용을 반드시 이해하고 넘어가야 마음이 편할 것 같습니다. 

 

최대한 이해해 볼려고 노력하고 잊지 않도록 여기에 기록을 해 보고자 합니다. 

 

이전 발행글에도 사실 this를 다루었지만 뭔가 완벽하지 않다라는 느낌이 들어 다시 정리해 보는 개념이겠지요. 

 

2022.09.02 - [컴퓨터 알아가기/JavaScript] - JavaSCript 입문 : 자바스크립트에서 this는 무엇인가? - 1

JavaSCript 입문 : 자바스크립트에서 this는 무엇인가? - 1

 

this의 개념을 잡는데 도움된 강의는 짐코딩을 참고 하였습니다. 

 

1. 자바스크립트에서 this 란

 

우선 다음과 같이 크게 정리를 해 보고자 합니다. 

 

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

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

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

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

 

상기 3가지 정의를 머리속에 기억하고 예제를 보면서 이해를 돕도록 하겠습니다. 3가지 정의가 잘 들어오지 않으면 우선 한가지만이라도  기억하자구요.

 

"this는 호출한 키워드이다. "

 

2. 예제를 통한 this 개념정리

 

① 객체선언 후 호출할 경우 this 

 

간단한 객체를 만들어서 (선언하고 나서) 자바스크립트상 this무엇인지 확인해 보겠습니다. this는 아무것도 없이 사용하면 그냥 window입니다. 따라서 어느 위치에서건 console.log(this)를 확인해 볼 수 있습니다. 

 

 

객체 변수명에 callThis(  ) 함수를 실행하고 콘솔에서 this가 가리키는 내용을 보면 다음과 같이 나옵니다. 

 

 

 

즉, callThis(  ) 함수의 실행식에서 보면 this라는 기능을 포함하고 있는데 여기서 this는 person을 의미하네요. 즉, person.callThis(  )로 callThis(  ) 함수를 person이라는 키워드에 의해 호출되었기 때문에 함수식내부에서 사용되는 this는 person을 가리킵니다.

 

상기 1번의 세번째 정의도 이해가 되리라 보여지네요. (호출하는 방식에 의해 정해진다는 개념)

 

정말 this가 person이 맞는지 Boolean으로 확인해 보고 이름과 나이를 출력하는 방식을 this를 붙혀 다음과 같이 해 보도록 하겠습니다. 

 

 

 

② 객체선언 후 호출하지 않을 경우 this 

 

그렇다면 호출키워드 없이 함수를 호출할 경우 this가 가리키는 갓을 보도록 하겠습니다. 같은 객체선언 후 함수식에서 this를 보도로 할게요. 

 

 

 

상기 브라우저를 보니 호출한 키워드없이 (호출하는 방식없이) 바로 함수를 호출하니 this는 바로 window를 가리키네요. 

 

좀 다른 예제를 가지고 호출키워드가 없는 경우와 호출키워드가 있는 경우를 같이 병합해서 사용해 보도록 하겠습니다. 

 

다음 내용을 보고 콘솔값을 예측해 보세요. 

 

 

 

콘솔 결과값은 다음과 같이 나옵니다.