프론트엔드/JavaScript

자바스크립트에서 this란 대체 무엇일까?

카엔입니다 2023. 2. 10. 16:35

자바스크립트에서 this란 대체 무엇일까?

자바스크립트에서 this라는 것에 대해 알아보자

짧게 요약하면 this란 자기 자신이 속한 객체나 해당 코드에 대한 인스턴스를 가리키는 자기 참조 변수이다

무슨 말인지 모르겠다

그냥 누가 나를 호출했냐라고 생각하면 편할 것 같다

나를 호출한 사람이 this다

당장 개발자 도구를 켜서 this를 쳐보자

다음과 같이 나온다

Untitled

호출한 애가 브라우저니까 this는 Window다 라고 나오게 된다

함수


그럼 함수로 생각해보자

예시를 두가지로 나눌건데 하나는 엄격 모드 X고 하나는 엄격 모드 O일때이다

  • 엄격 모드 X

      let whoAmI = 'string';
    
      function thisFunction() {
          this.whoAmI = 111111;
    
          console.log(whoAmI); // 111111
      }

    this.whoAmI는 window 객체다

    즉 전역 변수 whoAmI를 가리키게 된

  • 엄격 모드 O

      let whoAmI = 'string';
    
      function thisFunction() {
          this.whoAmI = 111111; // 여기서 에러가 난다
          whoAmI = 'still string';
      }

    thisFunction 함수에 this는 undefined가 나온다 그래서 undefined.whoAmI를 하는 것과 마찬가지이므로 에러가 나타난다

벌써 어렵다 게다가 사실 일반 함수일때와 화살표 함수일때에 this도 다르다

그건 따로 포스팅한게 있으니 궁금하면 확인 ⇒ 블로그

명시적 바인딩


apply()

apply()는 매개변수는 두가지이다

apply('함수 내부 this에 바인딩할 값', '자신을 호출한 함수의 인자')
function sample(a, b) {
    this.a = 'argu';
    this.b = 'ment';
}

sample.apply(this, [a, b]);

call()

call()은 인자들을 파라미터로 받는다

call(a, b, c, d, ...);

여기까지 this에 대해 정리했는데

내용에 부족한 부분이 많을 텐데 지적해주시면 바로 추가적인 포스팅을 할 예정입니다

감사합니다