[Intermediate] 클래스 - this

1. 클래스

2) this

• 일반(Normal) 함수는 "호출 위치"에 따라 this 정의
• 화살표(Arrow) 함수는 자신이 선언된 "함수 범위"에서 this 정의
• 화살표 함수는 콜백 함수 내에서 this가 정의되지 않으면, window 전역 객체로 설정

예제1

const orosy = {
  name: 'Orosy',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
  // 화살표 함수는 자신이 선언된 "함수 범위"에서 this가 정의
  console.log(this.name)
  }
}
orosy.normal()
// 값: Orosy
// 여기서 함수가 호출되었으므로 그 위치에서 객체 데이터는 orosy로 this.name인 Orosy가 출력됨
orosy.arrow() // 값: undefined

예제2

const amy = {
  name: 'Amy',
  normal: orosy.normal,
  arrow: orosy.arrow
}
amy.normal() // 값: Amy, 호출 위치는 여기이므로 this는 amy!
amy.arrow() // 값: undefined

예제3

function User(name) {
  this.name = name
}

User.prototype.normal = function () {
  console.log(this.name)
}

User.prototype.arrow = () => {
  console.log(this.name)
}

const orosy = new User('Orosy')
orosy.normal() // 값: Orosy
orosy.arrow() // 값: undefined

예제4

const timer = {
  name: 'Orosy!',
  timeout: function () {
    setTimeout(function () {
      console.log(this.name)
      // this가 사용된 부분은 일반 함수로 "호출 위치"는?
      // setTimeout이라는 함수의 내부 로직으로 콜백이 들어가서 어디선가 실행!
      // 그러므로 this.name을 timer라는 객체 데이터의 name 부분으로 지칭해서 출력할 수 없음
    }, 2000)
  }
}
timer.timeout() // 값: undefined

const timer = {
  name: 'Orosy!',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
      // this가 사용된 부분은 화살표 함수로 "함수 범위"는?
      // timeout이라는 메소드를 정의할 때 만든 함수 내부에 this.name이 사용됨
      // 따라서 timeout의 메소드가 있는 객체 데이터인 timer의 이름이 잘 출력됨
    }, 2000)
  }
}
timer.timeout() // 값: Orosy! (2초 뒤)