이게 뭔가요?

JavaScript this 키워드는 그것이 속한 객체를 참조합니다.

사용 위치에 따라 값이 다릅니다.

메서드에서 이것은 소유자 개체를 나타냅니다.
단독으로 이것은 전역 개체를 나타냅니다.
함수에서 이것은 전역 개체를 나타냅니다.
함수에서 엄격 모드에서는 정의되지 않습니다.
이벤트에서 이것은 이벤트를 수신한 요소를 나타냅니다.
call() 및 apply()와 같은 메서드는 이것을 모든 객체에 참조할 수 있습니다.

이것은 메소드에서
개체 메서드에서 이것은 메서드의 "소유자"를 나타냅니다.

이 페이지 상단의 예에서 이것은 사람 개체를 나타냅니다.

person 개체는 fullName 메서드의 소유자입니다.
예시:

fullName : function() {
  return this.firstName + " " + this.lastName;
}

이 혼자
단독으로 사용하는 경우 소유자는 Global 객체이므로 Global 객체를 참조합니다.

브라우저 창에서 전역 개체는 [개체 창]입니다.

예시:

let x = this;

엄격 모드에서 단독으로 사용될 때 이것은 전역 객체[객체 창]도 참조합니다.

예시:

"use strict";
let x = this;

함수의 this(기본값)
JavaScript 함수에서 함수의 소유자는 이에 대한 기본 바인딩입니다.

따라서 함수에서 이것은 전역 객체[객체 창]을 참조합니다.

예시:

function myFunction() {
  return this;
}

이것은 함수에서 (엄격)
JavaScript 엄격 모드는 기본 바인딩을 허용하지 않습니다.

따라서 엄격 모드에서 함수에서 사용될 때 이것은 정의되지 않습니다.

예시:

"use strict";
function myFunction() {
  return this;
}

이것은 이벤트 핸들러에서
HTML 이벤트 핸들러에서 이것은 이벤트를 수신한 HTML 요소를 나타냅니다.

예시:

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>

개체 메서드 바인딩
이 예에서 이것은 person 객체입니다(person 객체는 함수의 "소유자"입니다).

예시:

const person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

즉, this.firstName은 이 (사람) 객체의 firstName 속성을 의미합니다.

명시적 함수 바인딩
call() 및 apply() 메서드는 미리 정의된 JavaScript 메서드입니다.

둘 다 다른 개체를 인수로 사용하여 개체 메서드를 호출하는 데 사용할 수 있습니다.

이 자습서의 뒷부분에서 call() 및 apply()에 대해 자세히 읽을 수 있습니다.

아래 예에서 person2를 인수로 사용하여 person1.fullName을 호출할 때 이는 person1의 메서드인 경우에도 person2를 참조합니다.

예시:

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // Will return "John Doe"