call, apply, bind

함수의 호출 방식과 관계 없이 this 를 지정할 수 있습니다.
이 셋은 결국 함수에 this값을 직접 지정할 때 쓰는 3가지 친구들 입니다.

call

모든 함수에서 사용할 수 잇으며, this를 특정 값으로 지정할 수 있습니다.

const mike = {
	name: "Mike",
}

const tom = {
	name: "Tom",
}

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

showThisName(); // 아무것도 출력 안함 
showThisName.call(mike); // Mike 출력
showThisName.call(tom); // Tom 출력



// 생년과 직업을 받아서 객체를 새롭게 업데이트 해주는 함수
function update(birthYear, occupation){
	this.birthYear = birthYear;
    this.occupation = occupation;
}

update.call(mike, 1999, "singer");
console.log(mike); // mike 안에 생년과 직업이 들어간다.

update.call(tom, 2002, "teacher");
console.log(tom); //// tom 안에 생년과 직업이 들어간다.

함수.call(this로 사용할 값, 함수 매개변수1, 함수 매개변수2)

apply

함수 매개변수를 처리하는 방법만 call과 다르고 기능적으로는 같습니다.
call은 일반적인 함수처럼 매개변수를 직접 받지만, apply는 배열로 매개변수를 받습니다.

// 생년과 직업을 받아서 객체를 새롭게 업데이트 해주는 함수
function update(birthYear, occupation){
	this.birthYear = birthYear;
    this.occupation = occupation;
}

update.apply(mike, [1999, "singer"]);
console.log(mike); // mike 안에 생년과 직업이 들어간다.

update.apply(tom, [2002, "teacher"]);
console.log(tom); //// tom 안에 생년과 직업이 들어간다.

배열로 받기 때문에, 배열요소를 함수의 매개변수로 사용할 때 유용합니다.

call과 apply 사용 비교

const nums = [3,10,1,6,4];
// const minNum = Math.min(...nums);
// const maxNum = Math.max(...nums);

const minNum = Math.min.apply(null, nums);
// = Math.min.apply(null, [3,10,1,6,4]);  배열로 받아서 처리

const maxNum = Math.min.call(null, ...nums);
// = Math.max.apply(null, 3,10,1,6,4);  직접 받아서 처리

bind

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

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

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

// 새로운 함수를 정희하고 이 함수는 항상 this룰 mike로 받습니다. 
const updateMike = update.bind(mike); 

updateMike(1980, "police");
console.log(mike);

실제 예제 잃어버린 this 를 찾아서

실제 사용 예제 : 유저랑 객체가 있을 때 새로운 할당시 this를 잃어버리는 경우가 있습니다.

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

user.showName(); // hello, Mike

let fn = user.showName; // hello, Mike

fn(); // hello, -> fn을 할당 할 때, this 값을 잃어버림 

fn.call(user); // hello, Mike
fn.apply(user); // hello, Mike

let boundFn = fn.bind(user);

boundFn() // hello, Mike