this

• 일반 함수의 this는 호출 위치에서 정의
• 화살표 함수의 this는 자신이 선언된 함수(렉시컬: 함수가 동작할 수 있는 유효한 범위) 범위에서 정의

---

• 일반 함수 예제1

function user() {
  this.firstName = 'Lisa'
  this.lastName = 'Oh'
  
  return {
    firstName: 'Ju',
    lastName: 'Oh',
    age: 93,
    getFullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const u = user();

console.log(u.getFullName()); // Ju Oh

• 일반 함수 예제2

function user() {
  this.firstName = 'Lisa'
  this.lastName = 'Oh'
  
  return {
    firstName: 'Ju',
    lastName: 'Oh',
    age: 93,
    getFullName () { // 축약형으로 쓸 수 있다
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const kevin = {
  fistName: 'Kevin',
  lastName: 'Kim'
}

const u = user();

console.log(u.getFullName); // Ju Oh
console.log(u.getFullName.call(kevin)); // Kevin Kim

• 일반 함수 예제3

const timer = {
  title: 'TIMER!',
  timeout() { // 축약형으로 작성
    console.log(this.title); // TIMER!
    setTimeout(function () {
      console.log(this.title) // undefined
    }, 1000)
  }
}
timer.timeout();

• 화살표 함수 예제1

function user() {
  this.firstName = 'Lisa'
  this.lastName = 'Oh'
  
  return {
    firstName: 'Ju',
    lastName: 'Oh',
    age: 93,
    getFullName: () => {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const u = user();

console.log(u.getFullName()); // Lisa Oh

• 화살표 함수 예제2

const timer = {
  title: 'TIMER!',
  timeout() { // 축약형으로 작성
    console.log(this.title); // TIMER!
    setTimeout(() => { // 화살표 함수 적합. timeout 함수에서 this 찾음
      console.log(this.title); // (1초 뒤에) TIMER!
    }, 1000);
  }
}
timer.timeout();