Function.prototype.apply/call/bind 메서드에 의한 간접 호출

이들 메서드는 모든 함수가 상속받아 사용할 수 있다.

● apply/call 메서드

📎 Function.prototype.apply(thisArg[, argsArray])

: 주어진 this 바인딩과 인수 리스트 배열을 사용하여 함수를 호출한다.

• thisArg: this로 사용할 객체
• argsArray: 함수에 전달할 인수 리스트의 배열 또는 유사배열 객체

📎 Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

: 주어진 this 바인딩과 ,로 구분된 인수 리스트를 사용하여 함수를 호출한다.

• thisArg: this로 사용할 객체
• argsArray: 함수에 전달할 인수 리스트

🔥 apply와 call메서드의 본질적인 기능은 함수를 호출하는 것이다. 인수를 전달하는 방식만 다를 뿐 동일하게 동작함.

대표적 사용

😤 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우!!

👾#예제

function foo(){
  console.log(arguments); 
  
  const arr = Array.prototype.slice.call(arguments);
  // const arr = Array.prototype.slice.apply(arguments);
  console.log(arr);
  
  return arr;
}
foo(1,2,3); // [1,2,3]

● bind 메서드

Function.prototype.bind(thisArg)

: apply와 call 메서드와 다르게 함수를 호출하지 않는다.
: 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다!!

👾#01

function foo(){
  return this;
}

// this로 사용할 객체
const thisArg = { a:1 };

console.log(foo.bind(thisArg)); // foo
console.log(foo.bind(thisArg)()); // { a:1 }

🔥 bind 메서드는 함수를 호출하지 않으므로 명시적으로 호출해야 함.

대표적 사용

😤 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 사용한다!!

👾#02

const person = {
  name: 'lee',
  foo(callback) {
    // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
    setTimeout(callback.bind(this), 100);
  }
}
person.foo(function() {
  console.log(`Hi! my name is ${this.name}.`); // Hi! my name is lee.
});