상세 컨텐츠

본문 제목

[Javascript] function 메소드 ( call, apply, bind )

JAVA SCRIPT

by 혀누쓰0 2022. 6. 14. 13:33

본문

 

call( this에 바인딩할 객체, 매개변수, 매개변수, ~~~)

 

 

 

 

call의 인자는 순서대로

 

첫번째는 this에 바인딩할 객체

 

그 후로는 그 함수의 매개변수를 뜻한다.

 

위에 changeThis라는 함수는 2개의 매개변수를 받는 함수다.

 

this.age,   this.color는 당연히 undefined가 출력된다

 

call은 매개변수를 배열형태로 받지 않기때문에 

 

어레이라는 배열을 스프레이드 연산자 ...를 사용해서 대입했다.

 

call를 이용해서 매개변수로 ex라는 변수를 받고 this의 값은 ex로 된다.

 

그래서 this.age, this.color는 ex를 가리키는것을 알 수 있다.

 

 

 

 

 

 


 

 

 

 

apply( this에 바인딩할 객체 , [  array로 받는 매개변수 ])

 

 

 

 

call과 apply동일하게 동작한다 차이점은 apply는 매개변수를 배열로 받는다.

 

apply의 인자는 최대 2개다

 

첫번째는 this에 바인딩할 객체

 

두번째는 배열형태의 매개변수

 

apply는 매개변수를 배열 형태로 받기때문에

 

위에서 call과 다르게 ...연산자를 사용하지않고 배열을 대입했다.

 

마찬가지로 call이랑 똑같이 동작한다. 

 

this의 값은 첫번째 인자 ex가 나온다.

 

 

 


 

 

 

 

 

bind( this에 바인딩할 객체, 매개변수, 매개변수, ~~~ )

 

 

bind는 call apply와 this를 바인딩 하는것은 동일하지만

 

call, apply와 다르게 실행시키지 않는다.

 

원래의 함수에 영향을 주지않고 새로운 함수를 return한다

 

 

 

 

 

 

결론

 

call, apply, bind 공통점 :   this를 바인딩 해준다.

 

차이점 :  call과 apply는 동일하게 작동하지만 

 

매개변수를 어떻게 받느냐의 차이다 call은 매개변수를 단일로 받고 apply는 매개변수를 배열로 받는다

 

call, apply는 실행까지 시켜주는 반면에 bind는 실행은 시켜주지 않고 

 

원래의 함수에는 영향이없고 새로운 함수를 return 해준다

 

 

 

관련글 더보기