[Javscript] 자바스크립트 this

이 글에서 알아볼 것

• this란?
• this 사용시 주의점

 

1. this란?

• 함수 내에서, 즉 해당 함수가 객체의 일부인지와 상관없이 this 키워드는 해당 함수를 호출한 모든 항목을 참조한다

const newMovie = {
    info: {
      title: title,
      [extraName]: extraValue,
    },
    id: Math.random().toString(),
    getFormattedTitle: function () {
      return this.info.title.toUpperCase();
    }
  };

• 객체내에서 객체의 프로퍼티에 접근하기 위해서 this를 활용할 수 있다.

 

2. this 사용시 주의점

• 앞서 설명했듯이 this는 자동으로 주위에 있는 항목을 참조하는 대신, 해당 함수를 호출한 주체를 참조한다
  • 따라서 newMovie.getFormattedTitle()에서의 this는 newMovie를 가르킨다

그렇다면 만약, 위의 코드처럼 정의된 객체에 구조 분해를 사용한 후 함수를 호출하면 어떻게될까?

• const {getFormattedTitle, ...otherProps} = newMovie;
  • 오류가 발생한다…왜냐하면 getFormattedTitle()을 호출한 주체가 없고, 그렇다면 this는 자동으로 최상위 객체 window를 참조한다

이때 해결법은 3가지가 존재하는데,

1. 객체 구조분해를 사용하지 않고, newMovie.getFormattedTitle() 처럼 앞에 주체를 정확히 명시해주는 것
2. bind(), call(), apply() 메서드 활용 ... getFormattedTitle.bind(이 함수가 참조해야할 주체를 적어줌)

const { getFormattedTitle } = movie;
getFormattedTitle = getFormattedTitle.bind(movie);

 

*참고_bind() vs call() or apply()

• bind() -> bind()는 나중에 실행할 함수를 준비하고, 마지막에는 새로운 함수 객체를 반환한다
• call() or apply() -> 함수를 바로 실행시킨다