JavaScript_02. 문법_01_this 키워드

※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.

https://www.yes24.com/Product/Goods/105608999

바닐라 자바스크립트 - 예스24

 

 

 this 키워드는 사용되는 위치에 따라 this 키워드에 바인드 된 객체가 달라진다.

 

● this에 window 객체가 바인딩 된 경우

 <script> 태그 안에 선언된 함수 내에서 this는 window 객체가 된다.

this 키워드가 window 객체이므로 window 객체 내의 모든 내장 함수를 사용할 수 있다.

 

●  this에 DOM 요소가 바인딩 된 경우

 HTML DOM 요소에서 onclick, onchange 등의 이벤트가 발생할 때 호출하는 함수의 파라미터로 this를 전달하면 이벤트가 발생한 HTML DOM 그 자체가 된다.

 

●  this에 Object 객체가 바인딩 된 경우

 Object는 키와 값으로 데이터를 저장합니다. Object에서는 키에 대한 값으로 문자열, 숫자, 배열 등의 데이터 타입뿐만 아니라 함수를 정의해서 사용할 수 있다. 함수를 정의할 때 함수내에서 Object 내에 정의된 다른 키에 접근하려면 this 키워드를 통해 접근할 수 있다.

 

 

See the Pen JavaScript_02. 문법_01_this 키워드 by dk k (@dk-k) on CodePen.

 

예제 코드에 대한 설명

 

1. this = Window 객체

 console을 보면 Window 자체가 있는걸 확인할 수 있다.

 

 

2. this = DOM 요소

 <button> 태그를 클릭할 때 마다 onclick 이벤트(doSearch)가 발생되고, 이때 호출하는 함수에 this를 파라미터로 전달하면, this는 자동으로 현재 이벤트가 발생한 <button> 태그 자체가 된다.

 <select> 태그에서 선택이 바뀔 때마다 onchange 이벤트(doChagne)가 발생되고, 이때 호출하는 함수에 this를 파라미터로 전달하면, this는 자동으로 현재 이벤트가 발생한 <select> 태그 자체가 된다.

 

 

3. this = Object

 object에서는 키에 대한 값으로 함수를 선언하면, 함수 내에서 object의 다른 키를 접근할 때는 this 키워드를 사용. 이때 this는 object 그 자체(여기서는 person)가 되기 때문에 this 키워드를 통해 object에 저장된 데이터에 키로 접근할 수 있게 된다.