함수 프로퍼티 - call, apply/ bind

MDN_Function.prototype.call() >

MDN_Function.prototype.apply() >

MDN_Function.prototype.bind() >

 

1. call() : 함수 호출

주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.

function getTotal(one, two){
    return one + two;
}
let result = getTotal.call(this, 10, 20);
log(result);  //30

call() 메소드의 첫 번째 파라미터에는 호출된 함수에서 this로 참조할 오브젝트를 작성한다. 일반적으로 this를 사용하지만, 다른 오브젝트로도 작성이 가능하다.

let value = {one: 10, two: 20};
function getTotal(){
    return this.one + this.two;
}
let result = getTotal.call(value);
log(result);  //30

 

2. apply() : 함수 호출, 배열을 파라미터로 사용

주어진 this 값과 배열(또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출한다.

• call()은 함수에 전달될 인수리스트를 받지만, apply()는 인수들의 단일 배열을 받는다.
• 파라미터 수가 유동적일 때 사용한다.

function getTotal(one, two){
    return one + two;
}
let result = getTotal.appply(this, [10, 20]);
log(result);  //30

 

3. bind() : 새로운 오브젝트를 생성하고 함수 실행

bind() 메소드가 호출되면 새로운 함수를 생성한다. 받게되는 첫 인자의 값으로는 this키워드를 설정하고, 다음 인자들은 바인드된 함수의 인수에 제공된다.

let value = {one: 10, two: 20};
function getTotal(){
    return this.one + this.two;
}

//getTotal이 취지에 맞게 달라진 새로운 ValueTotal함수 생성
let ValueTotal = getTotal.bind(value); 
console.log(ValueTotal)  // 30