JS. this

this

일반(Normal) 함수는 호출 위치에서 따라 this 정의!

화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의!

const imae = {
  name: 'Imae',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name)
  }
}
imae.normal()
imae.arrow()

실행 결과
Imae
undefined

또 다른 위치에서 amy라는 변수를 만들어내서 객체 데이터를 할당한다.

imae.normal, imae.arrow 등 위에 있던 데이터를 amy에 할당되는 구조이다.

const amy = {
  name: 'Amy',
  normal: imae.normal,
  arrow: imae.arrow
}

amy.normal()
amy.normal()

실행 결과
Amy
undefined

일반 함수로 만든 부분은 this의 name을 amy로 잘 실행하였고, 화살표 함수로 만든 부분은 선언된 그 this의 위치에서 실행되기 때문에 undefined가 실행된다.

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

const imae = new User('Imae')

imae.normal()
imae.arrow()

실행 결과
Imae
undefined

이번에는 저번 시간에 배운 생성자 함수를 통해서 name을 출력하는 예제를 만들었다.

매개변수 name을 받아서 prototype을 이용해서 일반함수, 화살표함수를 받아서 콘솔에 출력한다.

imae라는 변수를 new라는 키워드로 생성자함수를 실행하면 객체데이터이고, normal(), arrow()를 실행할 수 있다.

화살표함수는 함수 범위에서 자신이 선언된 함수 범위에서 this를 정의하기 때문에 이번에도 undefined라는 결과가 출력된 것을 볼 수 있다.

const timer = {
  name: 'imae',
  timeout: function () {
    serTimeout(function () {
      console.log(this.name)
    }, 2000) 
  }
}

timer.timeout()

실행 결과
undefined

2초 뒤에 실행 결과 undefined가 나올 것이다. 타이머 함수를 콜백하는데 일반 함수를 쓰면 안된다.

함수 내부에 출력 내용이 있으면 화살표 함수를 써야 한다.

const timer = {
  name: 'imae',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
    }, 2000) 
  }
}

timer.timeout()

실행 결과
imae

화살표 함수를 쓰면 실행결과가 잘 출력되는 것을 볼 수 있다.

함수 범위에서 this가 정의되기 때문에 imae라는 name이 잘 출력되는 것이다.