this ?

this는 함수 내에서 함수 호출 맥락(context)를 의미한다.
맥락이라는 것은 상황에 따라서 달라진다는 의미인데 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다.
함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

일반 함수에서의 'this'

function func(){
  if(window === this){
    document.write("window===this");
  }
}
func();         
// 결과 "window === this"가 출력된다.

가장 기본적인 원칙은 함수안의 this는 그 함수가 포함된 객체를 가리킨다.
위의 예제에서 함수 func는 어떤 객체에도 소속되어 있지 않다.
이 때 this는 window를 가리킨다.
이유는 어떠한 전역객체나 전역변수는 window가 앞에 생략된 것이기 때문이다.
크게 보면 func함수는 window객체에 포함되어 있는 것이기 때문이다.

func();
window.func();

두 코드는 의미으로 보면 같은 말이다.

메소드에서의 'this'

위의 설명에서와 같이 만약 this가 어떤 함수 안에 있고, 그 함수는 어떤 객체의 메소드 역할을 한다면 이 때 this는 함수를 포함하고 있는 객체를 의미한다.

var i = {
  func: function(){
    if(i === this){
      document.write("i === this");
    }
  }
}
i.func();
// 결과 "i === this"가 출력된다.

위의 예제에서 func는 i 객체의 메소드 역할을 한다.
따라서 func안의 this는 함수를 포함하고 있는 객체 i를 가리키게 된다.

이벤트 리스너에서의 'this'

이벤트 리스너에서 this는 이벤트를 발생시킨 객체가 된다.

var i = document.querySelector('button');
$('button').click(function(){
    if(i === this){
    document.write("i === this");
    }
});
//button을 click시 "i === this"가 출력된다. 

위의 예제에서 button객체는 이벤트를 발생시킨 객체이다.
따라서 이 안에서의 this는 button객체를 가리키게 된다.

생성자의 호출

일반 함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 this를 알아보겠다.

var i = null;
fuction Func(){
  i = this;
}
var o1 = Func(); // -----1번
if (i === window){
  document.write('window');  
}
var o2 = new Func(); // ----2번
if (i === o2){
  document.write('o2');
}
// 결과 "window"와 "o2"가 출력된다. 

위의 예제 1번 코드를 보면 o1은 일반 함수이다.
따라서 o1에서의 this는 전역객체인 window를 가리키게 되어 window를 출력한다.

2번 코드를 보면 new를 이용해 빈 객체를 생성했다.
그리고 this는 만들어진 객체를 가리킨다.

여기서 중요한 점은 생성자가 실행되기 전까지 객체는 변수에도 할당될 수 없다.
하지만 this는 객체가 어떠한 식별자에 담기기전에 그 객체를 참고할 수 있는 레퍼런스이다.
따라서 this는 생성자가 만든 객체를 가리킨다.

정리

this가 만들어지는 경우,

✔️ 일반 함수에서 this -> window
✔️ 메소드에서 this -> 메소드 객체
✔️ 이벤트에서 this -> 이벤트 객체

자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다르다.
자바스크립트에선 모든 함수에 this를 사용할 수 있다.

자바스크립트에서 this는 런타임에 결정된다.
메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정된다.

이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있다.
함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함이 실수로 이어질 수 있다는 것은 단점이다.

자바스크립트가 this를 다루는 방식이 좋은지, 나쁜지는 우리가 판단할 문제가 아니다.
개발자는 this의 동작 방식을 충분히 이해하고 장점을 취하면서 실수를 피하는 데만 집중하면 된다.

참고 자료, 강의

생활코딩 javascript
코어 자바스크립트
https://beomy.tistory.com/6