[JavaScript] call, apply, bind

일반적으로 function에서 this는 window 객체를 가리킨다.

call

call 메소드는 모든 함수에서 사용할수 있으며 this 를 특정값으로 지정할 수 있다.
매개변수 : this로 지정할 객체, 해당함수의 파라미터들

const mike ={
	name: "Mike",
};
const tom = {
	name: "Tom",
};
function showThisName(){
  console.log(this.name);
}
function update(birthday, occupation) {
	this.birthday = birthday;
  	this.ocuupation = occupation;
};
update.call(mike, 1999, "singer");
console.log(mike); 
// {name: "Mike", birthday: 1999, occupation: "singer"}
update.call(tom, 2002, "teacher");
console.log(tom); 
// {name: "Tom", birthday: 2002, occupation: "teacher"}

apply

apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 같다.
call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만,
apply는 매개변수를 배열로 받는다.

const mike ={
	name: "Mike",
};
const tom = {
	name: "Tom",
};
function showThisName(){
  console.log(this.name);
}
function update(birthday, occupation) {
	this.birthday = birthday;
  	this.ocuupation = occupation;
};
update.apply(mike, [1999, "singer"]);
console.log(mike); 
// {name: "Mike", birthday: 1999, occupation: "singer"}
update.apply(tom, [2002, "teacher"]);
console.log(tom); 
// {name: "Tom", birthday: 2002, occupation: "teacher"}

bind

함수의 this 값을 영구 지정할 수 있다.

const mike ={
  name: "Mike",
};
function update(birthday, occupation) {
	this.birthday = birthday;
  	this.ocuupation = occupation;
};
const updateMike = update.bind(mike);
updateMike(1980, "police");
console.log(mike); 
// { name: Mike, birthday: 1980, occupation: "police");

사용 예제

메소드에서 this는 . 앞에있는 것이 대상이 된다.
user.showName()에서 this는 user가 되지만
fn() 에서는 this가 없기 때문에 hello, 가 출력된다.
이를 처리하기 위해 call, apply, bind를 사용한다.

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