[JavaScript] 명시적으로 this를 바인딩하는 방법

앞서 정리한 내용에서 this는 실행 컨텍스트가 생성될때 결정되고, 

어떻게 불리느냐에 따라서 this가 달라지며, 어떤 상황에서 전역객체를 가리키고, 렉시컬 객체를 가르키는지 정리했었다.

그 중 콜백함수 호출 시 그 내부에서의 this는 생각했던것과 다르게 this를 가리키고 있었는데,

이에 관해 this를 바인딩하는 방법에 대해 정리해보도록 한다.

 

바인딩

메서드와 객체를 this로 묶어놓는 것을 말한다

 

  1   call 메서드 사용

반환값 : this(첫번째 인자) 와 매개변수(나머지 인자)로 호출된 함수의 값이 반환된다.

 

  2   apply 메서드 사용

반환값 : this(첫번째 인자) 와 매개변수(배열)로 호출된 함수의 값이 반환된다.

call과 apply메서드는 서로 같으나, 차이로는 매개변수로 사용할 인자들의 나열법 차이인데,
call은 쭉 나열하면 첫번째 인자를 제외한 나머지를 매개변수로 사용하고,
apply는 두번째 인자를 배열로 받아 배열 안에 있는 값들을 매개변수로 사용한다.

 

 

null 및 undefined는 전역 객체로 대체되고 원시값은 객체로 변환된다

위의 예제를 보면 call과 binding을 사용해서 this를 첫번째 인자로 바인딩 해 주었다.

하지만 call을 사용한 예제에서는 this값이 원시값인데 그것을 그대로 넘겨주었더니 유사배열객체로 변환되어 반환되었다.

이점을 유의해서 사용해야한다.

 

  2 - 2  |  유사배열 객체에서 this를 바인딩 : Array.from 사용

* Array.from
유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만든다.

 

위의 예제에서 유사배열 객체로 반환된 binding값을
Array.from으로 배열로 반환받아 apply의 인자로 사용해 매개변수로 사용한 예제이다.

 

 

  3   bind 메서드 사용

call과 비슷하지만 함수를 호출하는 것이 아니라 넘겨받은 this및 인자들을 넘겨받아 반환만 한다

 

1 ) bind 메서드는 함수 호출시가 아닌, 할당 시 this를 미리 적용할 수 있다.

함수를 변수에 할당해서 미리 this를 지정해두고 사용

 

2 ) 부분 적용 함수 구현 → 디폴트 매개 변수를 bind시 결정할 수 있다.

bind로 this를 미리 지정하는데, 미리 디폴트 변수를 설정 해 놓을 수 있다
(후에 함수 호출시 인자는 매개변수로써 뒤에 이어져서 사용됨)

 

 

bind의 name 프로퍼티
bind로 this를 설정한 함수는 name 프로퍼티 앞에 bound라는 단어가 붙는다
(어떨때 사용하는지는 아직 잘 모르겟지만...😂)

 

 

---

 

✓ 참고

[ 코어 자바스크립트  - 저자 정재남 ]