this

Try it
JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다).

!https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this
참고자료입니다. mdn

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

console.log(test.func());
// expected output: 42

출처 : MDn

바인딩이란?

바인딩(Binding)이란 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 자바스크립트에서 함수를 호출 할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다. 이에 따라 this에 할당되는 값이 달라지게 되어 많은 개발자들이 혼돈을 겪게 된다. 지금부터 하나씩 알아보자

This Binding Rule
1. 객체의 메서드 호출 할 때 this 바인딩

객체 내부의 함수를 메소드라고 부른다. 메소드 내부 코드에서 사용된 this는 해당 메소드를 호출한 객체로 바인딩 된다.

var myObject = {
      name: 'foo',
      sayName: () => {
        console.log(this.name);
      }
}
var otherObject = {
      name: 'bar'
}
    
otherObject.sayName = myObject.sayName;

myObject.sayName(); // foo
otherObject.sayName(); // bar

2. 함수를 호출 할 때 this 바인딩

함수를 호출할 경우는, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다. 브라우저에서 자바스크립트를 실행하는 경우 전역 객체는 window 객체다.

var test = 'This is test';
console.log(window.test); // 'This is test'

var sayFoo = () => {
  console.log(this.test);
}

sayFoo(); // 'This is test'

이러한 특성은 내부 함수(inner fuction)을 호출 했을 경우에도 동일하게 적용된다.

var value = 100;

var myObject = {
  value : 1,
  func1 : () => {
    this.value += 1;
    console.log('func1() called. this.value : ' + this.value); // 2, 호출한 객체의 this가 바인딩
    // func1 내부 함수 func2
    func2 = () => {
      this.value +=1;
      console.log('func2() called. this.value : ' + this.value); // 101, 내부함수로서, 전역객체에 binding 된다.

      //func2의 내부 함수 func3
      func3 = () => {
        this.value += 1;
        console.log('func3() called. this.value : ' + this.value); // 102
      }
      func3();
    }
    func2();
  }
};

myObject.func1();

위 코드에서 내부 함수 호출 패턴을 정의해 놓지 않았기 때문에, 내부 함수들은 함수로 취급되어 this는 전역 객체에 바인딩 된다. 그래서 흔히들 that 변수를 이용해 this값을 저장한다. 아래와 같은 식이다.

생성자 함수를 호출 할 때 this 바인딩
기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 생성자 함수에서의 this는 생성자 함수를 통해 새로 생성되어 반환되는 개체에 바인딩된다.
call과 apply 메소드를 이용한 명시적인 바인딩
Function.prototype 객체의 메서드인 call() 과 apply()를 통해 명시적으로 this를 바인딩 가능하다. 기본 문법은 아래와 같다.

function.apply(thisArg, argArray)