[자바스크립트] API - call, apply 함수

call 함수

---

1. 구문

fun.call([thisObj[, arg[, arg2[, ...]]]])

2. 매개 변수

fun

가져다쓸 메소드

thisObj (선택 사항입니다)

현재 객체로 사용될 객체

arg1, arg2, argN (선택 사항입니다)

메소드에 전달될 인수 목록

3. 설명

call 메소드는 다른 객체 대신 메소드를 호출하는데 사용됩니다. 이 메서드를 사용하여 함수의 this 객체를 원래 컨텍스트에서 thisObj로 지정된 새객체로 변경할 수 있습니다.

apply 함수

---

1. 구문

fun.apply([thisObj[,argArray]])

2. 매개 변수

fun

가져다쓸 메소드

thisObj (선택 사항입니다)

현재 객체로 사용될 객체

argArray

함수에 전달될 인수 집합

3. call과 apply의 차이

call 메소드와 동일 하나, call 메소드는 인자 하나 하나를, apply는 인자 리스트를 전달합니다.

call, apply 함수 활용

---

function sum(num1, num2) {
    return num1 + num2;
}

console.log(sum(1, 2));
console.log(sum.call(this, 1, 2));

- 코드 1 -

코드 1 실행 결과

call 함수의 기본 사용법은 코드 1의 1~3번 줄과 같습니다. sum(1, 2), sum.call(this, 1, 2) 두 함수는 같은 결과 값을 보이고 있습니다. 그렇다면 sum.call(this, 1, 2)를 사용하는 이유는 무엇일까요?

call, apply 함수의 사용의 이유는 this([자바스크립트] this의 정체 참고)에 있습니다.

this를 함수의 인자로 넘김으로써, this의 값을 사용할 수도, 변경 할 수도 있게 됩니다.

예를 하나 들어 보겠습니다.

type = "zero";
var type1 = { type: "one" };
var type2 = { type: "two" };

function getType() {
    console.log(this.type);
}

getType();
getType.call(this);
getType.call(type1);
getType.call(type2);

- 코드 2 -

코드 2 실행 결과

call 함수를 사용한다면, call에 인자로 this를 넘겨줌으로, this에 값에 따라 getType 함수 안에서 출력되는 this.type의 값이 달라지는 것을 확인 할 수 있습니다.

getType()으로 window.type이 출력이 되고,

getType.call(this)도 마찬가지로 window.type이 출력 됩니다.

getType.call(type1)의 경우는 type1.type이,

getType.call(type2)의 경우는 type2.type이 출력 됩니다.

this의 값을 변경하는 것도 동일합니다.

type = "zero";
var type1 = { type: "one" };
var type2 = { type: "two" };

function setType(type) {
    this.type = type;
}

function getType() {
    console.log(this.type);
}

setType("_zero");
getType();

setType.call(this, "__zero");
getType.call(this);

setType.call(type1, "_one");
getType.call(type1);

setType.call(type2, "_two");
getType.call(type2);

- 코드 3 -

코드 3 실행 결과

앞에서 설명 드렸던것과 동일하게 call 함수를 사용하게 되면, this에 해당 값들을 변경 할 수 있게 됩니다.

결론을 말씀 드리자면!

call과 apply의 기능은 동일하지만, call은 인자 하나 하나를, apply는 인자 배열을 받습니다.

call과 apply의 핵심은 this에 있습니다. ([자바스크립트] this의 정체 참고)

(참조 : https://msdn.microsoft.com/ko-kr/library/h2ak8h2y(v=vs.94).aspx)