apply, bind, call

함수 호출 방식과 관계없이 this를 지정할있음

call

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

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

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

showThisName(); //undefined
showThisName.call(mike); //call의 첫번째매개변수는 this로 
사용할값이고 
두번째 값부터는 함수의 매겨변수의역활

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

update.call(mike, 1995, "student");

console.log(mike);

update.call(tom, 1222, "qwe");

console.log(tom);

apply

call은 매개변수를 직접받지만 apply는 배열로받음,apply는 배열요소를 함수의 매개변수로 사용할때 유용함

update.apply( mike, [1992, "asd"]);
console.log(mike);

const nums = [3, 10, 1, 6, 4];
// const Min = Math.min(3, 10, 1, 6, 4);
// const Max = Math.max(3, 10, 1, 6, 4);
//spread이용
// const Min = Math.min(...nums);
// const Max = Math.max(...nums);

//apply이용 -> array로 받음
const Min = Math.min.apply(null, nums);
// = Math.min.apply(null,[3,10,1,6,4])
const Max = Math.max.call(null, ...nums);
// = Math.max.call(null,1,3,10,1,6,4)
console.log(Min);
console.log(Max);

bind

this의 값을 영구적으로 지정

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

function uudate(birth, ocuu) {
  this.birth = birth;
  this.ocuu = ocuu;
}

const wow = uudate.bind(john);

wow(1991, "soccer");
console.log(john);

실전예제

const user = {
  name: "mike",
  showName: function () {
    console.log(`hello, ${this.name}`);
  },
};

user.showName();
// let fn = user.showName() => fn() 
 이무것도호출 x 이유는 매서느는 ??.()에서 ??부분이 this인데
 fn으로 할당하면서 this가 없어짐

let fn = user.showName;

해결법

fn.call(user); //call(x) -> x는 this로 사용할값
fn.apply(user);

let boundFn = fn.bind(user);
boundFn();