javascript 자바스크립트 call(),apply(),bind() 를 사용하는 이유와 차이점을 알아보자

call(),apply(),bind()를 무엇인가를 알아보기 전에

이 메소드들을 왜 사용하고 어떠한 상황에서 사용해야 하는지 아는것이 중요합니다.

그래야 3가지 중에 골라 쓸 수 있잖아요~

 

엄청 간단합니다.

함수내부에서 this가 어디를 참조하고 있는지 생각하시면 됩니다.

이 3가지 메소드가 함수내부에서의 this를 제어해주는 역할을 하고 있거든요.

 

 

 

why?

 

먼저 일반적인 함수에서 this가 무엇을 참조하는 지 확인해봅시다

 

 

 

 

함수를 호출했더니 this가 window를 가르키고있습니다.

당연한 결과죠

객체를 따로 지정해주지 않았으니까 전역객체인 window를 가르키는거겠죠

 

 

그럼 객체안에서 메소드 함수는 어떻게 동작하는지 볼까요?

 

obj객체 내의 test함수를 호출했더니 

this가 test함수를 실행시키고 있는 obj 객체를 가르키고 있습니다.

 

 

 

>>이렇게 함수가 호출되는 방식에 따라 this가 달라집니다.

this가 다른 객체를 참조하거나 

분명 작업할때 함수 내의 this가 obj 였는데 다른 사람의 작업으로 인해 바뀔수도 있겠죠..?

그럴때 call(),apply(),bind() 메소드를 사용하여 this를 지정해주는 것 입니다.

 

 

어떻게 사용하는 지 알아봅시다!

 

 

 

 

 

 

1.call()

 

func.call(thisArg[, arg1[, arg2[, ...]]])

 

this를 설정하고 함수를 즉시 실행합니다.

 

 function introduce(){ console.log( '안녕 내이름은 ' + this.name + '고 나이는 ' + this.age + '살 이야 잘부탁해' ) } var person = { name:'민주', age:20 } introduce.call(person) //안녕 내이름은 민주고 나이는 20살 이야 잘부탁해 

 

함수 introduce에 call()을 사용하여 함수내부의 this를 person으로 지정해주었어요.

introduce내에서 this가 person을 가르키고 있는 걸 확인하실 수 있습니다.

 

또 인수를 받을 수 있어요

 

 function introduce(age){ this.age = age; console.log( '안녕 내이름은 ' + this.name + '고 나이는 ' + this.age + '살 이야 잘부탁해' ) } var person = { name:'민주', age:null } introduce.call(person,20) //안녕 내이름은 민주고 나이는 20살 이야 잘부탁해 

 

이렇게 인수를 받아서 객체의 키값도 바꿀 수 있겠죠?

 

 

 

 

 

 

 

 

2.apply()

 

func.apply(thisArg,[argsArray])

 

apply()도 call()과 사용법이 같습니다

다만, 인수를 받을 때 배열로 받습니다

 

 function introduce(age){ console.log( '안녕 내이름은 ' + this.name + '고 나이는 ' + this.age + '살 이야 잘부탁해' ) } var person = { name:'민주', age:20 } introduce.apply(person,[20]) //안녕 내이름은 민주고 나이는 20살 이야 잘부탁해 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.bind()

 

func.bind(thisArg[, arg1[, arg2[, ...]]])

 

bind()는 call()과 사용법이 같습니다

그런데 apply()와 call()과 다른점이 이 둘은 즉시실행되는 반면

bind()는 새로운 함수를 생성합니다

 

 function introduce(age){ console.log( '안녕 내이름은 ' + this.name + '고 나이는 ' + this.age + '살 이야 잘부탁해' ) } var person = { name:'민주', age:20 } var introFunc = introduce.bind(person) introFunc() //안녕 내이름은 민주고 나이는 20살 이야 잘부탁해 

 

변수에 bind로 생성한 함수를 담아서 호출해주는거죠!

call()과 같이 인수를 받을 수 있습니다

 

 

 

 

 

 

 

정리

 

 

각각의 차이점을 아시겠나요?!

call(),apply(),bind() 메소드를 사용하여 함수가 호출되는 방식에 상관없이

this를 설정할 수 있습니다

 

 

 

method	함수 호출	인수
call()	즉시실행	인수 목록
apply()	즉시실행	배열
bind()	새로운 함수 생성	인수 목록