apply() vs. call() vs. bind()

function.prototype.apply()

func.apply(thisArg, [argsArray])

• 주어진 this 값과 배열(또는 유사배열객체)로 제공되는 arguments로 함수를 호출한다.
• thisArg : 함수 호출에 제공되는 this의 값
• argsArray : 함수가 호출되어야 하는 인수를 지정하는 유사 배열 객체
• return : 지정한 this값과 인수들로 호출한 함수의 결과

function.prototype.call()

func.call(thisArg[, arg1[, arg2[, ...]]])

• 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.
• thisArg : 함수 호출에 제공되는 this의 값
• arg1, arg2, ... : 객체를 위한 인수
• return : this와 arguments를 매개로 호출된 함수의 반환값

const person1 = {
  name: 'Kim',
};

const person2 = {
  name: 'Lee',
  hello: function () {
    console.log('Hello, ' + this.name);
  },
};

person2.hello(); // Hello, Lee
person2.hello.call(person1); // Hello, Kim

function.prototype.apply() vs. function.prototype.call()

• apply() : 인수들의 단일 배열을 받는다.
• call() : 함수에 전달될 인수 리스트를 받는다.

function.prototype.bind()

func.bind(thisArg[, arg1[, arg2[, ...]]])

• bind() 메서드가 호출되면 새로운 함수를 생성한다.
• thisArg : 바인딩 함수가 타겟 함수의 this에 전달하는 값 (바인딩 함수를 new 연산자로 생성한 경우 무시)
• arg1, arg2, ... : 대상 함수의 인수 앞에 사용될 인수
• return : 지정한 this 값 및 초기 인수를 사용하여 변경한 원본 함수의 복제본

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind