call/apply & this 값 설정

call() 또는 apply()를 사용한 this 값 설정하기

this의 값은 함수가 호출된 컨텍스트에 따라 보통 달라집니다.(new 키워드를 사용한 경우는 예외)

하지만 apply()나 call()을 사용해 함수를 호출할 때 this가 참조할 객체를 정해주는 방식으로 this의 값을 조작(제어)할 수 있습니다.

말하자면, 이 방식은 자바스크립트에게 "JS야~ X함수를 호출해. 하지만 X함수에는 this 값으로 Z객체를 사용하라고 일러줘~!!!"라고 말하는 셈과 같습니다.

이 방식을 사용하면 바로 자바스크립트에서 설정한 this의 값을 재정의 할 수 있습니다.

call() & this 값 설정

다음의 코드는 하나의 객체와 하나의 함수를 정의한 후 call()을 사용해 함수를 호출하며, 함수 내부의 this 값으로 myObj 를 사용하도록 합니다.

이제 myFn 함수의 내부 문장은 글로벌 객체(window)가 아닌 myObj의 속성을 설정할 수 있게 될 것입니다.

이와 같이 this가 참조(여기선 myFn 내부의)하는 값을 다른 객체로 대체할 수 있습니다.

JavaScript

var myObj = {};

var myFn = function (param1, param2) {
    // call()을 사용해 함수를 호출하며 'this'가 myObj를 가리키도록 설정한다.
    this.foo = param1;
    this.bar = param2;
    console.log(this); // Object {foo = 'foo', bar = 'bar'} 가 기록된다
};

// 함수를 호출하며 myObj 를 this로 설정한다.
myFn.call(myObj, 'foo', 'bar')

console.log(myObj); // Object {foo = 'foo', bar = 'bar'} 가 기록된다

apply() & this 값 설정

위의 예제에서는 call()을 사용하였지만, apply()를 사용할 수도 있습니다.

call()과 apply() 차이점은 함수에 매개변수를 전달하는 방식뿐입니다.

call()을 사용할 때는 쉼표로 값을 구분하여 매개변수를 전달해야하지만, apply()를 사용할 때는 배열 안에 값을 집어넣어 전달해야 합니다.

다음은 위 예제에서 call()을 apply()로 수정한 코드입니다.

JavaScript

var myObj = {};

var myFn = function (param1, param2) {
    // apply()을 사용해 함수를 호출하며 'this'가 myObj를 가리키도록 설정한다.
    this.foo = param1;
    this.bar = param2;
    console.log(this); // Object {foo = 'foo', bar = 'bar'} 가 기록된다
};

// 함수를 호출하며 myObj 를 this로 설정한다.
myFn.apply(myObj, ['foo', 'bar']); // 매개변수 전달방식이 배열이다.

console.log(myObj); // Object {foo = 'foo', bar = 'bar'} 가 기록된다.

call() 또는 apply()를 통해 자바스크립트가 함수 스코프 내에 설정한 this의 값을 재정의 할 수 있다.

Jaehee's WebClub