javascript-13: call, apply, bind

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

1. call

call메서드는 모든 함수에서 사용 할 수 있으며, this를 특정값으로 지정 할 수 있다.

const mike = {
  name: 'Mike',
};
const tom = {
  name: "Tom",
};
function showThisName() {
  console.log(this.name);
}
showThisName();
this.name에서의 this는 window를 가리킴 (window.name)

• 여기서 showThisName.call(mike); 를 입력

const mike = {
  name: 'Mike',
};
const tom = {
  name: "Tom",
};
function showThisName() {
  console.log(this.name);
}
showThisName();
showThisName.call(mike);

• 함수를 호출하면서 call을 사용하고 this로 들어갈 객체를 입력해주면 됨.
• call의 첫번째 매개변수는 this로 사용할 값, 추가 매개변수는 그 매개변수를 호출 하는 함수로 전달

const mike = {
  name: 'Mike',
};
const tom = {
  name: "Tom",
};
function showThisName() {
  console.log(this.name);
}
function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
};

update.call(mike, 1999, 'singer');
update.call(tom, 1923, 'teacher');
console.log(tom);
console.log(mike);

2. apply

• apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같음
• call은 일반적인 함수와 마찬가지로 매개변수를 직접받지만, apply는 매개변수를 배열로 받음
• 두번째 매개변수로 배열을 전달하면 그 요소들을 차례로 인수로 사용함.

const nums = [3, 10, 1, 6, 4];
const minNum = Math.min.apply(null, nums);
const maxNum = Math.max.call(null, ...nums);
console.log(minNum);
console.log(maxNum);   

• call은 …을 넣어줘야함 / apply는 배열 자체를 받을 수 있음.

3. bind

• bind는 함수의 this값을 영구히 바 꿀수 있음.

const mike = {
  name: 'Mike',
};

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

const updateMike = update.bind(mike);

updateMike(1988, "police");

console.log(mike);

const user = {
  name: "Mike",
  showName: function() {
    console.log(`hello, ${this.name}`);
  },
};
user.showName();
let fn = user.showName;
fn.call(user);
fn.apply(user);
let boundFn = fn.bind(user);
boundFn();