[ JS ] 함수 this

this

• this 키워드는 일반 함수와 화살표 함수에 따라 다르게 정의된다.
• 일반 함수는 호출 위치에서 this가 정의된다.
• 화살표 함수는 선언 위치(렉시컬 스코프)에서 this가 정의된다.
  (this 키워드가 포함된 화살표 함수를 감싸는 가장 가까운 함수가 this 키워드를 정의하는 영역이 됨)
  
  

✍ 일반 함수 예시

function User() {
  this.name = 'User'
  return {
    name: 'Neo',
    age: 85,
    getInfo() {
      return `${this.name}는 ${this.age}세입니다.`   // 여기선 아직 this 키워드가 뭔지 모름
    }
  }
}

const u = new User()
console.log(u.name)   // Neo
console.log(u.age)   // 85
console.log(u.getInfo())   // Neo는 85세입니다.

const evan = {
  name: 'Evan',
  age: 25
}
console.log(u.getInfo.call(evan))   // Evan은 25세입니다.

✔ this 키워드는 u 라는 인스턴스다!

👀 만약 일반 함수를 화살표 함수로 바꾼다면?!

function User() {
  this.name = 'User'
  return {
    name: 'Neo',
    age: 85,
    getInfo: () => {
      return `${this.name}는 ${this.age}세입니다.`
    }
  }
}

const u = new User()
console.log(u.name)   // Neo
console.log(u.age)   // 85
console.log(u.getInfo())   // User는 undefined세입니다.

const evan = {
  name: 'Evan',
  age: 25
}
console.log(u.getInfo.call(evan))   // User는 undefined세입니다.

✔ User 함수 영역에서는 this.age가 정의되어있지 않기 때문에 undefined로 출력이 된다!

✍ 화살표 함수 예시1

function createTimer(message, duration) {
  return {
    message: message,
    timeout() {
      return setTimeout(() => {
        console.log(this.message)
      }, duration)
    }
  }
}

const t1 = createTimer('T1', 1000)
t1.timeout()   // 1초 뒤 T1

const t2 = createTimer('T2', 2000)
t2.timeout()   // 2초 뒤 T2

✍ 화살표 함수 예시2

Array.prototype.abc = function () {
  return this.map(function (item) {
    return item.toUpperCase()
  })
}

/*Array.prototype.abc = function () {
  return this.map(item => {
    return item.toUpperCase()
  })
}
*/

const fruits = ['apple', 'banana', 'cherry']
const flowers = ['rose', 'tulip', 'lily']

console.log(fruits.abc())   // ['APPLE', 'BANANA', 'CHERRY']
console.log(flowers.abc())   // ['ROSE', 'TULIP', 'LILY']

✔ this 키워드는 fruits라는 배열데이터 이거나 flowers라는 배열데이터가 될 수 있다!