[JS] this

GDORI·2024년 8월 12일
0

JavaScript

목록 보기
15/28

this

this는 다른 객체지향 언어에서 클래스로 생성한 인스턴스를 말하지만, JS에서는 어디에서나 사용할 수 있다.

상황에 따라 다른 this

this는 실행 컨텍스트가 생성될 때 결정되며 이것을 this를 bind 한다라고 한다.

  • 전역공간에서 this
    전역공간에서 this는 전역 객체를 가르킨다.
    브라우저에서는 window를 가르키고, node에서는 global을 가르킨다.

  • 함수 this
    함수 내부에서의 this는 상황에 따라 다르다.
    I . 어떤 함수를 함수로서 호출될 경우는 this가 바인딩 되지 않는다.
    II . 실행컨텍스트를 활성화할 당시 지정되어있지 않으면 this는 전역객체를 의미한다.
    III. 독립적 호출일 경우는 항상 전역 객체를 가르킨다.

  • 메서드 this
    메서드는 호출 주체가 분명하여 this가 바인딩 되지만 예외가 있다.
    메서드라 해도 함수로서 호출하면 this는 전역객체를 가르킨다.

this 우회

  • 변수를 활용하는 법
    내부 스코프에 this를 변수로 할당(self)
  • 화살표 함수 사용
    화살표 함수는 this 바인딩 과정 자체가 없어서 상위 요소를 바인딩한다.
    일반 함수와 화살표 함수의 차이가 무엇이냐고 묻는다면 this binding의 여부라고 한다.

명시적 this 바인딩

  1. call 메서드
    a. 호출 주제인 함수 즉시 실행
    b. call 명령어를 사용하여 this binding해주면 명시적으로 사용 가능

  2. apply 메서드
    call 메서드와 동일하지만 this에 binding할 객체를 넣어주고 후에 넣는 인자를 배열 형태로 넘긴다.

  3. bind 메서드
    call과 비슷하지만, call과는 다르게 즉시호출하는 것이 아닌 넘겨받은 this, 인수들을 바탕으로 새로운 함수를 반환하는 메서드이다.

profile
하루 최소 1시간이라도 공부하자..

0개의 댓글