JavaScript this - call

 안녕하세요. 알렉스 입니다. 이번에는 저번에 알아봤던 this와 call에 대해서 설명해 드리겠습니다.

만약 this에 대해서 잘 모르신다면 위 링크로 들어가서 한번 읽어주시기 바랍니다.

저번에 object.function()으로 부르지 않는다면 this는 모두 global로 출력한다고 하였습니다. 다만 함수형 변수를 선언하기 전에 bind()를 한다면 bind한 object를 this로 출력합니다.

bind와 비슷하지만 조금 다른 call에 대해서 알려 드리겠습니다.

call(선언할 객체, 전달인자1, 전달인자2)

선언할 객체 : this에 출력할 객체(object)

전달인자1 : 함수에 포함되어있는 첫번째 전달인자 입력

전달인자2 : 함수에 포함되어있는 두번째 전달인자 입력

물론 이렇게 작성하면 이해하기 어려우니 예시를 들어 드리겠습니다.

 bind와 마찬가지로 call의 첫번째 인자는 this를 지정할 object입니다. 위 그림에서는 obj입니다. 그리고 설명보다 1개더 전달인자가 많은데 이것은 call함수가 전달인자를 함수에 전달하는데 제한이 없다는 것을 설명하기 위한 것입니다.

add함수에는 3개의 전달인자를 받도록 되어 있습니다. 고로 call의 전달인자1,2,3에 각각 4,5,6을 입력합니다. obj2가 선언과 동시 this = obj, a = 4, b = 5, c = 6이 된 것을 알수 있습니다.

하지만 obj2를 출력하면 다음에는 숫자 3만 나옵니다. 

그것은 obj2의 type이 숫자이기 때문입니다. 처음 obj2를 선언할때 obj.func를 불러서 return값을 obj2에 넣은것입니다. 이때 return값의 속성이 number이고 3이기 때문에 그다음에 obj2를 부를때 number type 변수를 불러오는 것입니다.

만약 변수가 아닌 함수로써 obj2를 부르고 싶다면 bind를 사용해야 합니다. bind에 대한 내용은 이전글을 참고해 주시기 바랍니다.

이전글 : JavaScript this

다음글 : JavaScript apply