JavaScript의 This 키워드

이 키워드를 이해하기 위해 다음 이미지를 사용하여 영어로 "this"라는 단어의 예를 들어 보겠습니다.




위의 두 이미지에서 설명하려는 것은 This 키워드가 속한 개체를 참조한다는 것입니다. 그 가치는 그것이 사용되는 곳에 달려 있습니다.

이 키워드는 함수 소유자의 값을 가져오고 함수 소유자를 가리킵니다. 이 키워드의 값은 정적이 아니며 함수가 호출되는 방식에 따라 다릅니다.

브라우저에서 간단한 작업console.log(this)을 수행하면 출력은 this 키워드가 함수를 호출한 개체를 가리킬 것임을 보여주는 전역 개체(window 개체)가 됩니다.

함수는 일반적으로 4가지 방법으로 호출할 수 있습니다(다른 방법도 있음).

메서드로: 다음 코드 예에서 this 키워드는 세부 개체를 가리키고 있습니다. 이는 함수라고 하는 세부 개체이므로 소유자 개체이기 때문입니다.

'use strict'
const detail = {
  name: "samurai",
  year: "2020",
  calcAge: function () {
    return 2077 - this.year;
  },
};
detail.calcAge();//57

엄격 모드에서 간단한 함수 호출로.

'use strict'
function sum() {
  let add = 2 + 2;
  console.log("sum of two numbers is" + add);
  console.log(this);
}
sum();

일반 함수의 경우 이 키워드는 창 개체를 가리키지만 엄격 모드를 사용하면 정의되지 않습니다.

화살표 기능: 고유한 this 키워드를 가져오지 않습니다. 대신, 주변 함수 또는 상위 함수는 어휘 범위로 인해 this 키워드가 가리키는 함수입니다.

이벤트 리스너로서: 이 경우 this 키워드는 다음을 가리킵니다.
이벤트에 연결된 핸들러 함수.

기억해야 할 중요한 점은 이 키워드는 우리가 사용하는 함수가 아니라 함수를 호출한 객체를 가리킨다는 것입니다.

요약
1. 이것은 소유자 개체 또는 함수를 호출한 개체를 나타냅니다.
2. 이 키워드의 값은 사용 위치에 따라 다릅니다.
3. 코드에 'use strict'가 있는 경우 간단한 함수 호출을 위해 정의되지 않은 창 개체를 가리킵니다.