call()과 this

call 메소드

call 메소드의 첫 번째 파라미터에는 작성(넘겨준)한 객체를 this가 참조하게 된다. 

따라서 this.propertyName 형태로 접근하여 값을 구할 수 있다.

이 점이 call 메소드의 목적이고 특징이다.

구 분	타 입	데이터(값)
object	Function	호출할 함수
파라미터	Object	첫번째 파라미터 : this 로 참조하게 될 객체 두번째 파라미터 : 호출된 함수에 넘줄 파라미터(옵션값)
반환		호출된 함수에서 반환한 값

첫 번째 파라미터에 this로 참조할 오브젝트를 작성한다. ES3에서 첫 번째 파라미터를 작성하지 않거나 null을 작성하면 글로벌 객체(브라우저기준으로 window)를 사용한다. 

반명 ES5는 파라미터 값을 그대로 사용한다.

그런데 ES5 에서도  에러가 발생하지 않고 글로벌 객체를 사용하며 이는 과거 버전 코드의 호환성을 위한 것으로 여겨진다.

단, strict 모드에서는 글로벌 객체를 사용하지 않고 에러가 발생한다.

그리고 두 번째 파라미터에 호출된 함수에 넘겨줄 값을 작성한다. 콤마로 구분하여 다수의 파라미터를 작성할 수 있다.

호출된 함수에서 반환한 값을 반환한다.

일반적인 코드

javascript

var value = 100;

function get(one) {
    return one + this.value;
}

// get 함수 앞에 객체를 작성하지 않았기 때문에 글로벌 객체의 get 함수가 호출
// 첫 번째 파라미터에 this를 지정, this는 글로벌 객체를 참조
// 따라서 get 함수가 속한 객체와 this가 참조하는 객체가 같다
var result = get.call(this, 50);

console.log(result); // 150

첫 번째 파라미터에 명시적인 객체를 지정한 형태

javascript

var value = 100,
    base  = 10,
    rate  = 5;

var get = function(value) {
    return this.base * this.rate + value;
};

// 첫번째 파라미터에 명시적인 객체를 작성
var result = get.call({base:20, rate:30}, 50)

console.log(result); // 650;

// 첫번째 예제 코드와 같은 일반적인 형태인 this를 지정
var result2 = get.call(this, 10);
console.log(result2); // 60

첫 번째 파라미터에 객체를 지정할 수 있다는 것은 new 연산자로 만든 인스턴스,배열 객체를 지정할 수 있다는 것을 의미한다.

함수를 호출할 때 this가 참조하는 객체 변경

call 메소드의 첫 번째 파라미터에 객체를 지정할 수 있다는 것은 파라미터 값으로 this가 참조하는 객체를 조정할 수 있다는 뜻이 된다.

javascript

var value = 'window';

var sports = {
    value: 123,
    soccer: {
        value: 456,
        get:function() {
            return this.value;
        }
    }
};

// get 메소드의 일반적인 호출 형태
console.log(sports.soccer.get()); // 456

// call() 사용
console.log(sports.soccer.get.call(sports)); // 123
console.log(sports.soccer.get.call(sports.soccer)) // 456
console.log(sports.soccer.get.call(this)); // window

call 을 사용하면 다른 생성자에 정의된 멤버를 가져올 수 있다.

call 을 사용하면 다른 객체에 정의된 멤버를 자신의 메서드처럼 호출할 수 있다.

func.call(thisObj, arg1, arg2, arg3) 

thisObj.func(arg1, arg2, arg3);

Related Info

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

Jaehee's WebClub