call, apply, bind

call, apply, bind 메서드는 함수 호출 방식과 관계없이 this를 특정값으로 지정할 수 있다.

call

//예제1
const ari = {
  name: "Ari",
};

const min = {
  name: "min",
};

function showThisName() {
  console.log(this.name);
}

showThisName(); // 공백, 여기서 this는 window를 가리킨다.  window.name : ""(빈 문자열)
showThisName.call(ari); // Ari


//예제2
const ari = {
  name: "Ari",
};

const min = {
  name: "min",
};

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

update.call(ari, 2002, "teacher");
console.log(ari); //{name: 'Ari', birthYear: 2002, occupation: 'teacher'}

함수를 호출하면서 call을 사용하고, call의 첫번째 매개변수에 this로 사용할 객체를 넘기면
해당함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. call의 매개변수가 더 있으면 그 매개변수를 사용하는 함수로 전달된다.

apply

매개변수를 처리하는 방법을 제외하고 call과 완전히 같다.
call은 일반적인 함수와 마찬가지로 매개변수를 직접받지만, apply는 매개변수를 배열로 받는다.
배열요소를 함수 매개변수로 사용할 때 유용하다.

//예제1
const ari = {
  name: "Ari",
};

const min = {
  name: "min",
};

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

update.apply(ari, [2002, "teacher"]);
console.log(ari); //{name: 'Ari', birthYear: 2002, occupation: 'teacher'}



//예제2
const nums = [2, 10, 1, 6, 4];

const min = Math.min(...nums);
const min = Math.min.apply(null, nums); // Math.min 메소드는 this가 필요하지 않아서 아무값을 넣어도 된다. // 배열형태로 인자를 받는다
const min = Math.min.call(null, 2, 10, 1, 6, 4); // 순서대로 직접 인자를 받는다.
const min = Math.min.call(null, ...nums);

const max = Math.max(...nums);
const max = Math.max.apply(null, nums);// 위와 동일

console.log(min);
console.log(max);

bind

함수의 this값을 영구히 바꿀 수 있다.