this 알아보기

this는 상황에 따라서 계속해서 달라진다. this에 대해서 알아보기 위해서 console.log를 여러 곳에서 찍어보자.

1. window 전역 객체와 같은 global context에서 호출된 this
   global하게 호출된 this의 경우 window 객체와 같은 결과물이 나온다.

// console.log(window); 와 같다.
 console.log(this);

2. object 내부의 this
   object 내부 this는 해당 object 자기 자신을 가리키게 된다.

let person = {
	firstName: "",
  	lastName: "",
  	fullName: function(){
    	return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName());

3. function 내부의 this
   function 내부의 this는 global에서 선언한 this와 같게 window 객체를 의미한다.
   함수 내부의 함수에 있는 this도 window이다.

function thisFunction() {
	console.log(this); // this는 window

  	function insideFunc(){
    	console.log(this); // this는 window
    }
}

4. 이벤트리스너에서의 this
   이벤트리스터에서 this는 이벤트를 발생시킨 객체가 된다.
   예를 들어 button의 onclick에 this가 선언되있다면 해당 element를 의미한다.

// 해당 this는 속해있는 element인 button을 뜻하므로, button의 배경색이 blue가 된다.
<button type="button" onclick="this.style.backgroundColor="blue">클릭1</button>

// callFunc에 this를 던져주는데, this는 해당 element인 button이다.
<button type="button" onclick=callFunc(this)>클릭2</button>

function callFunc(obj){
	console.log(obj)
}