출처: https://velog.io/@chojs28/자바스크립트-this에-대해

this란?

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.

자바스크립트에서는 this가 함수를 호출할 때, 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정 됩니다.

1. 일반함수 호출

1// 함수 선언식
2function funcDeclaration () {
3	console.dir(this);
4}
5funcDeclaration(); // window
6
7// 함수 표현식
8const funcExpressions = () => {
9	console.dir(this);
10}
11funcExpressions(); // window

일반 함수를 console.dir(this)로 확인해보면 this는 전역객체에 바인딩 되므로 window가 출력 됩니다.

2. 메서드 호출

1const obj = {
2	foo: function() {
3		console.log('foo this:', this);
4	},
5	bar() {
6		console.log('bar this:', this);
7	},
8	baz: () => {
9		console.log('baz this:', this);
10	},
11}
12
13obj.foo(); // obj
14obj.bar(); // obj
15obj.baz(); // window

this가 메서드를 호출하면 기본적으로 해당 메서드를 가지고 있는 객체에 바인딩 되므로 object가 출력됩니다. 하지만 메서드가 화살표 함수로 작성되었을 경우, 화살표 함수의 상위 컨텍스트의 this를 호출하므로 전역객체에 바인딩 됩니다.

3. 내부함수 호출

1const obj = {
2  outer: function() {
3    console.log(this); // obj 객체
4    function inner() {
5      console.log(this); // 전역 객체 (window 또는 global)
6    }
7    inner();
8  }
9};
10
11obj.outer();

this가 일반함수, 메서드, 콜백함수 내부 어디에서 선언되었든 상관없이 this가 전역객체에 바인딩 됩니다.

4. 이벤트 핸들러 호출

1const btn = document.querySelector('#btn')
2btn.addEventListener('click', function () {
3  console.log(this); //#btn
4});

이벤트 핸들러에서 this는 이벤트를 받는 HTML 요소에 바인딩 됩니다.

5. 생성자 호출

1function Person(name) {
2  this.name = name;
3}
4 
5var kim = new Person('kim');
6var lee = new Person('lee');
7 
8console.log(kim.name); //kim
9console.log(lee.name); //lee

this가 생성자 안에서 호출되면, 생성자 함수가 생성하는 객체에 바인딩 됩니다.

6. apply/call/bind 호출

1function foo(num1, num2) {
2	console.log(this.name, num1 + num2);
3}
4
5const person = {
6	name: 'cho',
7};
8
9foo.call(person, 1, 2); // cho, 3
10foo.apply(person, [1, 2]); // cho, 3
11
12const newFoo = foo.bind(person);
13newFoo(1, 2); // cho, 3

• call은 함수를 호출하며 첫 번째 인자로 전달하는 값에 this를 바인딩 합니다.

• apply는 함수를 호출하며 첫 번째 인자로 전달하는 값에 this를 바인딩 합니다.

  인자는 배열 형태로 전달하며, 실제 배열이 전달되는 것이 아니고 배열의 요소들이 전달됩니다**.**

• bind는 첫 번째 인자로 전달하는 값에 this를 바인딩 하며, 새로운 함수를 반환합니다.