call, apply, bind (1) - call

call이란?

MDN에서 Function.prototype.call이란 주어진 this값 및 각각 전달된 인수와 함께 호출된 함수를 호출한다고 나와있다.

쉽게 애기해서, call을 사용하면 자신을 this로 지칭한 객체의 메서드 외에 다른 객체의 메서드도 사용할 수 있다. 물론 프로퍼티의 경우도 동일하게 가져와 쓸 수 있다.

 

function Person (f_name,l_name){
    this.f_name = f_name;
    this.l_name = l_name;
}
undefined
Person.prototype.hello = function(){
    console.log(`my name is ${this.f_name} ${this.l_name}`);
}

let kim = new Person('kim','minjae');
kim.hello()
//my name is kim minjae

다음과 같이 있을때 hello함수와 f_name,l_name는 Person을 가져온 것에 한해서만 사용할 수 있었다. 그렇지만, call을 안다면 그 다음부터는 그럴 필요가 없어진다. 사용방법으로 크게 두가지를 볼 수 있다.

1. 프로퍼티를 사용법을 가져온다.

function ET (f_name,l_name) {
    Person.call(this,f_name,l_name);
    this.species = 'alien'
}
let lee = new ET('lee','jin');
//ET {f_name: "lee", l_name: "jin", species: "alien"}

다음 call을 설명하자면 Person을 불러서 ET라는 함수 안에서 사용한다. 단, 이떄의 this는 Person이 아닌 ET로 하고서 f_name과 l_name을 인자로 똑같이 받아 Person에 this.f_name과 this.l_name을 설정했듯이 ET에서 똑같이 사용한다는 뜻이다.

 

2. 메서드를 빌려와 사용한다.

kim.hello.call(lee)
//instrument.js:110 my name is lee jin

kim은 Person을 받은 것이고 lee는 ET를 받은것이다. 프로퍼티를 받을때처럼 빌리고 싶은 대상.메서드.call(사용되어지고 싶은대상)의 순으로 사용하면 메서드도 가져와 쓸 수 있다.