[JS] 헷갈리는 this 정리 (this 사용 방법)

this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 식별자이다. 

 

✓ 일반 메소드의 this

기본적으로 메소드의 this 를 호출하는 객체에 의해서 결정된다

호출한 놈(객체) = this 

단순히 함수로 호출될 때, this는 전역 객체를 가리킨. (단 엄격 모드에서는 undefined)

const user = {
  firstName: 'Gil dong',
  lastName: 'Hong',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(user.getFullName()) // Gil dong Hong

이때 this는 user 객체를 가리킨다.

 

 

 

✓ 화살표 함수의 this

화살표 함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의

화살표 함수의 this는 화살표함수를 감싸고 있는 외부 함수의 this를 상속받는다.

하지만 만약 감싸고 있는 외부 함수가 없는 경우, this는 전역 객체를 가리키게 된다

(브라우저 환경에서는 window 객체가 전역 객체이며, Node.js 환경에서는 global 객체가 전역 객체)

const user = {
  firstName: 'Gil dong',
  lastName: 'Hong',
  getFullName: () => {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(user.getFullName())  //undefined undefined

화살표 함수를 감싸는 외부함수가 없기 떄문에 this는 전역 객체를 가리킨다.

따라서 firstName과 lastName 속성을 찾을 수 없어 undefined가 출력된다.

 

function user() {
  this.firstName = 'Neo'
  this.lastName = 'Anderson'

  return {
    firstName: 'Gil dong',
    lastName: 'Hong',
    getFullName: () => {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const u = user()
console.log(u.getFullName())  // Neo Anderson

여기서 화살표 함수의 this는 화살표 함수를 감싸고 있는 user 함수의 this를 참조하므로, Neo Anderson을 반환

 

 

 

화살표 함수가 유용한 상황

화살표 함수를 사용하면 this가 외부 함수의 this를 참조하기 때문에, 특히 콜백 함수에서 유용하다.

함수내부에 또 다른 함수가 들어있는 구조라면 일반함수보다는 화살표 함수를 쓰는것이 더 적합

const timer = {
  title: 'TIMER!',
  timeout() {
    console.log(this.title)
    setTimeout(function () {
      console.log(this.title)
    }, 1000)
  }
}

timer.timeout()
// TIMER!
// undefined

위 예제에서 setTimeout의 콜백 함수 내의 this는 전역 객체를 가리키므로 undefined가 출력된다.

 

const timer = {
  title: 'TIMER!',
  timeout() {
    console.log(this.title)
    setTimeout(() => {
      console.log(this.title)
    }, 1000)
  }
}

timer.timeout()
// TIMER!
// TIMER!

콜백함수를 감싸고 있는 timeout 함수가 가지고 있는 this를 상속 받아,  timer 객체를 가리키게 되어. TIMER!가 두 번 출력된다.

 

✓ 전역 컨텍스트에서의 this

this 단순 호출인 경우

console.log(this);

브라우저 환경에서는 전역 객체인 window를, Node.js 환경에서는 global 객체를 가리킨다.