Js - this

Noa·2022년 10월 27일

JS

목록 보기

8/13

this는 함수의 실행 컨텍스트를 가리키는 예약어.

'함수가 실행되는 환경 '
'함수가 실행 될 때의 컨텍스트'

다른 언어와 다르게 JS의 this는 상황에 따라 다른 값들을 가르킴. 이 때문에 JS가 조금 어렵게 느껴짐.

console.log(this); // window

this의 가장 기본적인 컨텍스트는 글로벌 컨텍스트.
출력된 window는 JS의 최상위 객체를 가리킴.

var obj = {
  num: 10,
  printNum: function() {
    console.log(this.num);
  }
};

obj.printNum(); // 10

객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킴.

function showComment() {
  console.log(this);
}

showComment(); // window

위 함수를 실행시키면 window 객체를 가리키고 있음.
결론적으로 일반 함수의 this는 전역 컨텍스트임.

function Developer() {
  console.log(this);
}
var dev = new Developer();

위 코드는 실행하자마자 바로 아래와 같은 결과를 콘솔에 출력

Developer {}

그 이유는 new로 인스턴스를 생성하는 순간 함수가 실행되기 때문. 그리고 여기서 알 수 있는 사실은 생성자 함수의 this는 함수의 내부를 가리킨다는 것

네번째 this는 실제로 웹 개발을 할 때 가장 많이 마주하게 되는 this임. 바로 데이터를 받아올 때 사용하는 HTTP 요청과 같은 비동기 처리 코드임.

function fetchData() {
  axios.get('domain.com/products').then(function() {
    console.log(this);
  });
}

fetchData(); // window

기본적으로 HTTP 요청과 같은 비동기 처리 코드는 전역 컨텍스트를 갖는다. 비동기 처리 코드의 콜백 함수는 전역 컨텍스트를 가리킴.

생성자 함수는 함수를 이용해 새 인스턴스를 선언하는 함수를 의미.

function Developer() {
  // ...
}
var dev = new Developer();

JS는 프로토타입 기반 언어. 클래스 기반 언어가 아니기 때문에 위와 같이 함수를 이용하여 인스턴스를 생성 할수 있다.

몰입