this 값

this 값은 현재 객체를 참조합니다. 이 값은 예를 들어 함수와 객체지향 프로그래밍에서 JavaScript에서 널리 사용됩니다.

구문

javascriptthis.현재 객체;

예제

this를 사용하여 포커스를 잃는 입력 필드의 값을 콘솔에 출력해 봅시다:

html<input id="elem" value="text">
javascriptlet input = document.querySelector('#elem');
input.addEventListener('blur', func);

function func() {
  console.log(this.value);
}

예제

this를 사용하여 포커스가 없는 입력 필드의 값을 콘솔에 출력해 봅시다:

html<input id="elem" value="text">
javascriptlet input = document.querySelector('#elem');
input.addEventListener('blur', func);

function func() {
  console.log(this.value);
}

예제

이제 객체지향 프로그래밍에서 this의 사용을 살펴보겠습니다. Student 클래스에 학생의 이름과 성을 표시하는 함수 show를 작성해 보겠습니다:

javascriptclass Student {
  name;
  surn;
  
  show() {
    return this.name + ' ' + this.surn;
  }
};
  
let stud = new Student;
stud.name = 'John';
stud.surn = 'Smit';
console.log(stud.show());

함께 보기

  • 함수에 컨텍스트를 바인딩하는 메서드 bind,
  • 함수를 컨텍스트와 함께 호출하는 메서드 call,
  • 함수를 컨텍스트와 함께 호출하는 메서드 apply,