Core JS 03. This

betterplaywon·2022년 1월 13일
1

Core JS

목록 보기
3/5
post-thumbnail

작년에 this에 대해 정확히 파악하지 못하고 끝났는데
스터디를 진행하며 모르는 부분에 대해 보충할 수 있는 기회가 와서
기분이 좋다.

2021, this에 대한 개인 공부

this란

클래스로 생성한 인스턴스 객체

  • 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수

상황에 따라 달라지는 this

this는 함수를 호출할 때 결정된다.

  • this는 코드 어디서든 참조할 수 있다.
  • 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
  • 크게 전역에서 사용할 때와 함수 안에서 사용할 때로 나눌 수 있다.

1) 전역 공간에서의 this

전역 변수를 선언하면 JS 엔진은 이를 전역 객체의 프로퍼티로 할당한다.

전역 객체(= window)의 프로퍼티로 할당한다는 말

2) 함수 vs 메서드
함수를 실행하는 방법 : 함수로 호출 or 메서드로 호출
함수는 그 자체로 독립적인 기능을 수행하는 반면, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행함.

  • 소소한 뀰팁 : 함수와 메서드 구분 방법
    -> 함수 앞에 dot(.)이 있는가 없는가로 구분 가능

2-1) 함수 내부에서의 this

어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않는다.
this가 지정되지 않으면 this는 전역객체를 가리킨다.

2-2) 메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담긴다.
어떤 함수를 메서드로서 호출하는 경우 호출 주체는 바로 함수명(프로퍼티) 앞의 객체이다.

메서드 내부 함수에서의 this를 우회하는 방법

주변 환경의 this(= 상위 함수의 this)를 상속받고 싶다면

  1. this를 변수에 저장해 사용한다

  1. 함수를 arrow function으로 표현한다

3) 콜백 함수 호출 시 함수 내부 this

메서드로 접근할 때와 콜백 함수로 접근할 때의
this가 다른 것을 확인할 수 있다.
콜백함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을
지정한 경우에는 그 대상을 참조하게 된다

4) 생성자 함수 내부에서의 this

자바스크립트는 함수에 생성자로서의 역할을 함께 부여함.

위의 코드를 보면 생성자 함수도 함수이기 때문에 기본적으로 this가 전역 객체를 가리킨다.

new 연산자와 함께 생성자 함수를 호출하면 this 바인딩이 메소드나 함수 호출 때와는 다르게 동작한다.

Reference
zerocho의 this
PoiemaWeb this
this란 무엇일까

profile
'Why' better than 'Yes'

0개의 댓글