Javascript의 this

this  에 대하여

Javascript에서 this 키워드는 this 가 속해있는 object를 참조합니다.
어디에서 사용되느냐에 따라 this 가 가리키는 값에 차이가 있습니다.

1. Object method 내부  this 

const person = {
  firstName: "JJ",
  lastName: "D",
  fullName: function => {
  	return this.firstName + " " + this.lastName;
  }
}

person.fullName(); // "JJ D"

Object의 method 에서  this 는 소유자 객체(owner object)를 참조합니다.

예제에서  this는, fullName Function 을 "소유한"  person Object입니다.
다른말로 하면  this.firstName은  person Object의  firstName 프로퍼티를 가리키는 것입니다.

2. 전역에서  this  사용시

const x = this; // [object Window]

Function을 지정하지 않고 Javascript에서 바로  this 를 호출하면, 기본적으로 소유자객체(owner object)는 전역객체(Global object), 즉 window 객체가 됩니다. 브라우저에서 window 객체는  [object Window] 로 표시됩니다.
Strict 모드에서 단독으로 사용할 경우에도 마찬가지입니다.

3. Function에서 this 

function myFunction () {
  return this;
}
myFunction(); // [object Window]

Function이 전역에서 설정되어있고, 특정 object에서 호출되지 않은 경우에는, 기본적으로 function의  this 는 window - 전역객체를 가리킵니다. Strict 모드에서는 window가 아닌 undefined를 가리킵니다.

4. Event Handler 내부의  this

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

HTML Event Handler에서,  this 는 이벤트를 받는 HTML 객체를 가리킵니다.

5. call() ,  apply() 에서의 this 

var person1 = {
  fullName: function () {
    return `${this.firstName} ${this.lastName}`;
  }
}
var person2 = {
  firstName: "JJ",
  lastName: "D"
}

person1.fullName.call(person2);
// "JJ D"

call() ,  apply() 메서드는 Javascript에서 정의된 method 입니다. 둘 다 특정 object를 가져와 사용할 수 있습니다. (자세한 설명은 이 포스팅을 참조하세요)
여기서 this 는 호출된 object를 가리킵니다.

정리

• 메서드에서 사용시 -  소유자 객체 owner object를 참조합니다.
• 단독 사용시 -  전역 객체(global object)를 참조합니다.
• Function 에서 사용시 - 일반모드에서는 전역 객체(global object)를 가리킵니다.
• Function에서 사용시 -  strict모드에서는 undefined를 가리킵니다.
• Event에서 사용시 -  event를 받는 element를 참조합니다.
• call()/apply() 메서드에서 사용시 -  메서드에서 호출된 객체를 가리킵니다.

 

참조 및 출처: www.w3schools.com/js/js_this.asp

JavaScript this

etc...