들어가기 전에
자바스크립트를 더욱 더 특별하게 만드는 도구인 call에 대해서 알아봅니다.
학습 목표
call을 사용하여 독립된 함수를 특정 객체의 메소드로 호출할 수 있습니다.
핵심 단어
- call
- 메소드
들어가기 전에
자바스크립트를 더욱 더 특별하게 만드는 도구인 call에 대해서 알아봅니다.
학습 목표
call을 사용하여 독립된 함수를 특정 객체의 메소드로 호출할 수 있습니다.
핵심 단어
연관 없는 두 객체와 공통으로 가지는 sum이라는 함수를 만들어 봅시다.
또 한 객체가 다른 객체를 상속하도록 __proto__를 지정해봅시다.
var kim = {name:'kim',first:10,second:20}
var lee = {name:'lee',first:10,second:10}
lee.__proto__ = kim
function sum(){
return this.first + this.second;
}
sum이라는 함수는 어떤 객체에도 속해 있지 않은 채 생성되었지만
기괴하게도 객체들 안에 있는 first 와 second라는 속성을 더하는 역할을 하고 있습니다.
어떻게 이 기능을 쓸 수 있을까요?
자바스크립트의 모든 함수는 call이라는 메소드를 가집니다.
사실 자바스크립트에서는 함수도 객체이기 때문입니다 ..!
call 메소드의 인자로 객체를 지정하게 되면 해당 함수의 this는 인자로 받은 객체가 됩니다.
var kim = {name:'kim',first:10,second:20}
var lee = {name:'lee',first:10,second:10}
lee.__proto__ = kim
function sum(){
return this.first + this.second;
}
//sum();
console.log("sum.call(kim)",sum.call(kim)); //sum.call(kim) 30
console.log("sum.call(lee)",sum.call(lee)); //sum.call(lee) 20
call은 여러 인자를 가질 수 있습니다.
첫번째 인자는 this로 지정할 객체가 오고 그 뒤로는 함수의 인자로 들어갈 값이 들어가게 됩니다.
var kim = {name:'kim',first:10,second:20}
var lee = {name:'lee',first:10,second:10}
lee.__proto__ = kim
function sum(prefix){
return prefix+ (this.first + this.second);
}
//sum();
console.log("sum.call(kim)",sum.call(kim,'=> ')); //sum.call(kim) => 30
console.log("sum.call(lee)",sum.call(lee,': ')); //sum.call(lee) : 20
생각해보기
call 메소드는 인자로 어떠한 것들을 받고 이 인자들은 call을 호출한 함수 내부에서 어떤 역할을 하게 되나요 ?
comment
첫번째 인자는 this, 두번째 인자부터는 매개변수의 역할을 한다.
첫번째 인자는 this 두번째 인자 부터는 해당 함수의 변수
call 메소드는 인자로 객체와 call하는 함수에 들어갈 인자를 받는다.
객체는 함수의 this가 되고 인자는 call한 함수가 받는 인자로 적용된다.
첫번째 인자는 this 두번째 인자 부터는 해당 함수의 변수
문) call 메소드는 인자로 어떠한 것들을 받고 이 인자들은 call을 호출한 함수 내부에서 어떤 역할을 하게 되나요
call은 함수뒤에 점을 두고 쓰여 인자로 객체와 그 함수에 쓰일 인자가 오며 첫번째 인자는 함수의 this의 객체를 지정합니다. 그 뒤에 오는 인자는 함수의 들어갈 인자가 온다.
첫번쨰 인자로 함수안에서 this 로 받을 객체를 받고, 두번쨰부터는 함수에 들어갈 인자들을 받는다.
첫번째 인자는 this로 지정할 객체가 오고 그 뒤로는 함수의 인자로 들어갈 값이 들어가게 된다.
call API는 객체를 실행시켜주는 함수이며 모든 함수(js에서는 모든 것이 object이므로)는 call이라는 메서드를 가지고 있다.
sum.call()은 sum()과 같은데, sum의 첫 번째 인자로 객체를 지정해주어 this를 원하는 객체에 매칭시킬 수 있다.
두 번째 인자로 부터는 this와 매칭시킨 함수에 넘겨줄 인자들을 차례대로 넣어준다.
call 이란 메소드는 첫번쨰 인자로 함수안에서 this 로 받을 객체를 받고, 두번쨰부터는 함수에 들어갈 인자들을 받는다.
첫번째 인자 -> 함수내부에서 this 취급이 되는 파라미터 , 두번째 인자부터 함수가 가지고 있는 파라미터 값 순차적으로
call 메소드는 인자로 해당함수의 this는 인자를 받은 객체가 된다.
call 에서 첫번 째 인자는 this로 지정한 객체, 두번 째 인자는 함수의 인자로 들어갈 값이 된다.
call메소드의 인자로는 this로 사용할 객체와 함수의 인자가 올 수 있다.
sum.call(kim, '~~~')와 같은 형태로 kim은 this로 지정할 객체가 되고, ~~~은 함수의 인자로 들어갈 값이 된다.