[Javascript] this

this

• 일반 함수는 호출 위치에 따라 this 정의
• 화살표 함수는 자신이 선언된 함수 범위에서 this 정의

const ww = {
  name: 'WW',
  // 일반 함수
  normal: function () {
    console.log(this.name)
  },
  // 화살표 함수
  arrow: () => {
    console.log(this.name)
  }
}

ww.normal()  // WW
ww.arrow()  // Undefined

const kim = {
  name: 'Kim',
  normal: ww.normal,
  arrow: ww.arrow
}

kim.normal()  // Kim
kim.arrow()  // Undefined

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

const ww = new User('WW')

ww.normal()  // WW
ww.arrow()  // undefined

• setTimeout나 setInterval 함수를 사용할 때는 콜백으로 일반함수보다 화살표 함수를 쓰는 것이 활용도가 높음

const timer = {
  name: 'LWW!!',
  timeout: function () {
     setTimeout(function () {
       console.log(this.name)
     }, 2000)
  }
}
timer.timeout()  // 2초 뒤 undefined

const timer = {
  name: 'LWW!!',
  timeout: function () {
     setTimeout(() => {
       console.log(this.name)
     }, 2000)
  }
}
timer.timeout()  // 2초 뒤 LWW!!