This

this는 함수의 실행 컨텍스트를 가르키는 예약어이다.
여기서 실행 컨텍스트란 사전적 정의로 '함수가 실행되는 환경' 이며 좀 더 쉽게 접근하기 위해
'함수가 실행될 때의 컨텍스트' 로 이해하는게 좋다

['Execution Context'] 란 (https://mingcoder.me/2020/02/28/Programming/JavaScript/execute-context/)

첫 번째 this

console.log(this); //windows

this의 가장 기본적인 컨텍스트는 글로벌(전역) 컨텍스트 입니다.
여기서 출력된 window는 자바스크립트의 최상위 객체를 가리킨다.

두 번째 this

 var obj = {
 	num: 10,
    printNum: function() {
    	console.log(this.num)
    }
 }

여기서 obj.printNum() 을 실행한다면

 obj.printNum(); // 10이 출력된다

※객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킨다.

세 번째 this

일반 함수(함수 선언문)에서의 this

function showComment() {
	console.log(this);
}

showComment(); // windows

다음뫄 같이 함수 선언문 에서의 this 는 window 객체를 가르키고 있다는 것을 알 수 있습니다.
※일반 함수의 this는 전역 컨테스트 이다!!!.

생성자 함수의 this

function Developer() {
	console.log(this)
}
var dev = new Developer(); // Developer{}

new로 인스턴스를 생성하는 순간 함수가 실행되기 때문에
※생성자 함수의 this는 함수의 내부를 가리킨다!!!.

네 번째 this

데이터를 받아올 때 사용하는 HTTP 요청과 같은 비동기 처리 코드

function  fetchData() {
	axios.get('domain.com/products').then(function() {
    	console.log(this);
        });
}

fetchData(); // window

기본적으로 HTTP 요청과 같은 비동기 처리 코드는 전역 컨테스트를 갖는다.
※비동기 처리 코드의 콜백 함수는 전역 컨텍스트를 가리킨다!!!.

요약

this는 함수의 실행 컨텍스트를 가르키는 예약어이며
this의 위치에따라
this의 가장 기본적인 컨텍스트는 글로벌(전역) 컨텍스트 이며
※객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킨다.
※일반 함수의 this는 전역 컨테스트 이다.
※생성자 함수의 this는 함수의 내부를 가리킨다.
※비동기 처리 코드의 콜백 함수는 전역 컨텍스트를 가리킨다.

출처 : [https://joshua1988.github.io/vue-camp/]