Call , Apply, Bind

함수 호출 방식과 관계없이 this 를 지정할 수 있는 메소드
function.prototype 객체의 메소드

• apply, call : 함수를 호출하는 역할
  • 대표적으로 유사 배열 객체에 배열 메소드를 사용하는 경우에 활용

• bind : this 로 사용할 객체만 전달
  • 메소드의 this 와 메소드 내부의 중첩 함수 또는 콜백 함수의 this 가 불일치하는 문제를 해결하기 위해 사용
  • 첫번째 인자를 this 에 바인딩하지만 함수를 실행하지 않고, 새로운 함수를 반환함

기존 함수 호출과의 차이점

- 해당 메소드를 사용해 함수를 "실행" 하면 함수의 첫 번째 인자로 전달하는 객체에 this 를 바인딩 할 수 있다는 것

바인딩

- bind : 결속시키다, 묶다 
- 메서드와 객체를 묶어놓는 것
- 함수 또는 메소드를 호출한 대상에 실제 함수를 연결해주는 것
- 변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것
- this 바인딩은 this 와 this 를 가리킬 객체를 바인딩 하는 것.

---

call

• 모든 함수에서 사용할 수 있으며, this 를 특정값으로 지정할 수 있다.
• 일반적인 함수와 같이 매개변수를 직접 받는다.
• 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this 를 바인딩한다.

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

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

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

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

update.call(mike, 1999, "singer");
console.log(mike)
// {name: "Mike", birthYear: 1999, occupation : "singer"}

update.call(tom, 2002, "teacher");
console.log(tom);
// {name: "Tom", birthYear : 2002, occupation : "teacher"}

---

Apply

• 함수 매개 변수를 처리하는 방법을 제외하면 call 과 완전히 같다.
• 매개변수를 배열로 받는다.

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

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

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

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

update.call(mike, [1999, "singer"]);
console.log(mike)
// {name: "Mike", birthYear: 1999, occupation : "singer"}

update.call(tom, [2002, "teacher"]);
console.log(tom);
// {name: "Tom", birthYear : 2002, occupation : "teacher"}

매개변수를 배열로 처리했다는 점이 달라졌다.

---

call 과 apply 차이 예제

const nums = [3,10,1,6,4];

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

const maxNum = Math.max.call(null, ...nums);
// = Math.max.call(null, 3, 10, 1, 6, 4)

• apply 는 매개변수로 배열을 받아오기 때문에, nums 를 그대로 사용하고
• call 은 배열로 받아오지 않고 직접 다 받아와야하기때문에 스프레드 연산자를 사용해줬다.

---

Bind

• 함수의 this 값을 영구히 바꿀 수 있다.
• 함수를 실행하지 않고, 새로운 함수를 반환한다.
• 반환된 새로운 함수를 실행해야 원본 함수가 실행된다.

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

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

const updateMike = update.bind(mike);

updateMike(1980, "police");

// {name: "Mike", birthYear : 1980, occupation : "police"}

• 반환 받은 새로운 함수 = updateMike()
• 반환된 새로운 함수를 실행해서, 원본 함수를 실행한다. = updateMike(1980, "police");