Javascript 'This'

[kgneng2]

This 는 현재 실행 문맥이다

• 실행문맥 === 호출자

function nonStrictMode() {
  return this
}

function strictMode() {
  'use strict'
  return this
}

console.log(nonStrictMode()) // window
console.log(strictMode()) // undefined
console.log(window.stricMode()) // window

생성자 함수/ 객체

function NewObject(name, color) {
  this.name = name
  this.color = color
  this.isWindow = function() {
    return this === window
  }
}

const newObj = new NewObject('nana', 'yellow')
console.log(newObj.name) // nana
console.log(newObj.color) // yellow
console.log(newObj.isWindow()) // false

const newObj2 = new NewObject('didi', 'red')
console.log(newObj2.name) // didi
console.log(newObj2.color) // red
console.log(newObj2.isWindow()) // false

• new 없이 호출시 아래와 같이 에러 발생
• window에 this를 의미하기 때문에 해당 property가 없으므로 error 나온다

  const withoutNew = NewObject('nana', 'yellow')
  console.log(withoutNew.name) // error
  console.log(withoutNew.color) // error
  console.log(withoutNew.isWindow()) // error

생성자 함수 안에 다른 함수 있을때

function Family(firstName) {
  this.firstName = firstName
  const names = ['bill', 'mark', 'steve']
  names.map(function(lastName, index) {
    console.log(lastName + ' ' + this.firstName)
    console.log(this)
  })
}
const kims = new Family('kim')
// bill undefined
// window
// mark undefined
// window
// steve undefined
// window

• Family에서 map method 호출, map은 서브루틴으로 분류 되서, this가 window를 가리키기 때문에 undefined가 나온다

해결법

1. bind 함수를 이용해서 해결한다.

function Family(firstName) {
  this.firstName = firstName
  const names = ['bill', 'mark', 'steve']
  const that = this
  names.map(function(value, index) {
    console.log(value + ' ' + that.firstName)
  }.bind(this))
}
const kims = new Family('kim')

2. arrow 함수 wrapping

function Family(firstName) {
  this.firstName = firstName
  const names = ['bill', 'mark', 'steve']

  names.map((value, index) => {
    console.log(value + ' ' + this.firstName)
  })
}
const kims = new Family('kim')

결론

• this 는 누가 호출했느냐에 따라 결정된다는 것입니다

reference

• https://blueshw.github.io/2018/03/12/this/