javascript call, apply, bind 차이점! 알짜만 빼먹기!

javascript call, apply, bind 함수 알짜만 빼먹기

 

call, apply, bind 는 함수의 this를 명시적으로 바인딩 할때 사용합니다. 

유용하면서 자주 사용되는 함수이고, 형태는 조금씩 다르니 익숙해 지도록 합시다.

 

위의 세 함수는 Function의 prototype으로 모든 함수에서 사용이 가능합니다.

프로토타입에 대해서는 아래의 Link를 참고하세요.

 

Link : https://aljjabaegi.tistory.com/295

Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

 

call 함수에 대해서 먼저 알아보도록 하겠습니다.

 

call

[구문]

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

call은 첫번째 매개변수로 thisArg를 넘겨주고 파라미터를 그대로 사용해주면 됩니다. 

 

[예시]

 

<script>
function Obj(name, age){
    this.name = name;
    this.age = age;
}

Obj.prototype.print = function(){
    console.log('name : '+this.name+' age : '+this.age);
}

var student1 = new Obj('철수', '20');
student1.print();
</script>

 

Obj는 생성자 함수이고, 이 함수의 prototype으로 이름과 나이를 출력하는 print 함수를 생성했습니다.

위 코드의 실행 결과는 'name : 철수 age : 20' 입니다. 

프로토타입체이닝에 의해 print 함수의 this는 Obj를 가리키게 되고 그 값에 접근하는 것이죠.

 

그런데 갑자기! Obj 객체가 아닌 전역변수에 있는 name과 age를 Obj의 print함수를 사용해 출력하고 싶어졌습니다..(?!)

함수 내부의 this를 바꾸고 싶은 것이죠.

 

이럴때, call 함수를 사용하여 전역객체 this를 인자로 넘겨주면 됩니다. 

그럼 print함수의 this는 window객체가 되며, 전역에 있는 name과 age를 출력하게되는 것이죠.

 

 

 

 

<script>
var name = '영희';
var age = '19';

function Obj(name, age){
    this.name = name;
    this.age = age;
}

Obj.prototype.print = function(){
    console.log('name : '+this.name+' age : '+this.age);
}
var student1 = new Obj('철수', '20');

student1.print.call(this);
</script>

 

위 코드의 결과는 'name : 영희 age : 19' 가 됩니다. 

 

print함수에 파라미터가 있는 경우를 보도록 하겠습니다.

 

<script>
var name = '영희';
var age = '19';
function Obj(name, age){
    this.name = name;
    this.age = age;
}

Obj.prototype.print = function(sex, bloodType){
    console.log('name : '+this.name+' age : '+this.age+' sex : '+sex+' bloodType : '+bloodType);
}
var student1 = new Obj('철수', '20');
student1.print('female', 'O');
student1.print.call(this, 'male', 'A');
</script>

 

call을 사용하려는 함수에 파라미터가 있는 경우 위와 같이 콤마(,)로 연결하여 전달해주면 됩니다. 

이 전달 방식이 call과 apply 함수의 차이점입니다. 

 

apply

[구문]

 

fun.apply(thisArg, [argsArray])

 

call 과의 차이점은 매개변수의 전달 방식이 배열이라는 것입니다. 

위의 call 함수를 apply 함수로 변경해보도록 하겠습니다. 

 

student1.print.apply(this, ['male', 'A']);

 

결과를 call 함수를 사용했을 때와 같습니다. 

 

여기서 잠깐 정리를 하면, 'call과 apply는 모두 this를 바인딩할때 사용하며, 매개변수가 배열이냐 아니냐인 차이가 있다.

그리고 이 둘은 모두 this 바인딩만 하고 함수를 호출 하는 공통점이 있다.' 라고 말할 수 있겠네요.

 

bind

[구문]

 

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

구문은 call 함수와 같습니다.

 

하지만 bind는 함수를 호출하는 것이 아닌 새로운 함수를 만들어 리턴을 해줍니다. 그렇기 때문에 bind 함수 사용 시 바로 함수가 호출되지 않죠! 이것이 차이점 입니다. 

그럼 위에서 call과 apply를 사용한 부분을 bind를 사용해서 바꿔보도록 하겠습니다.

 

var print = student1.print.bind(this, 'female','O');
print();

 

설명드린데로 bind는 함수를 실행하는 것이 아닌 새로운 함수를 리턴해주기 때문에 print라는 변수로 받고

실행하였습니다. 

결과는 같죠.

 

this의 활용은 개발을 보다 효율적으로 하게 도와주기 때문에 this를 바인딩 하는 위의 세가지 방법에 대해서 잘 정리하고 가셨으면 합니다. 

 

감삼당.