[Javascript] this

  자바스크립트에서 this는 자신을 호출한 객체가 담기는 속성이며 실행 컨텍스트 내부의 this 프로퍼티에 의해 그 값이 결정된다. this의 값이 결정되는 기준은 생각보다 복잡하다. 다음은 대표적인 경우들에 this의 값이 어떻게 적용되는지에 대한 예시들이다.

 

1) 단독적으로 사용된 this

→ window 객체

 

2) 일반 함수 안의 this

→ window 객체

 

3) 일반 중첩 함수의 this

→ window 객체

 

※ 만약 this가 window 객체인 경우 this.변수명으로 전역 데이터에 접근할 수 있다.

 

4) 이벤트 리스터의 this

→ 이벤트를 발생시킨 객체 (target)

 

5) 객체의 메소드 안에 위치한 this

→ 메소드를 호출한 객체

 

6) 생성자 안의 this

→ 생성자 함수가 생성하는 객체 인스턴스

하지만 여기서 new를 빼먹는 순간 일반 함수 호출과 같아지기 때문에 this는 window 객체가 되니 주의해야 한다.

 

7) Arrow Function의 this

→ 바로 바깥 범위의 this (this가 window 객체인 일반 함수와 다름!)

 

명시적 바인딩 (Explicit Binding)

명시적 바인딩을 사용하면 this를 임의로 지정해줄 수 있다.

(1) call( )

  this를 지정하면서 해당 함수를 호출한다. (this로 지정할 객체는 첫 번째 파라미터로 넣어주면 된다.)

 

(2) apply( )

  call과 같은 기능을 수행한다. 그러나 실제로 함수를 호출할 때 실행에 필요한 파라미터를 넣어주는 방식이 다르다. call은 두 번째 인자부터 파라미터를 ,로 구별하여 하나씩 넣어주고 apply는 모든 파라미터를 배열로 묶어서 두 번째 파라미터에 넣어준다.

 

(3) bind( )

  앞의 두 함수와 다르게 함수를 실행하지 않고 바인딩한 버전의 함수를 리턴한다.