📌[JS] call, apply, bind 메서드 사용법

call

const mike = {
	name: "Mike";
}
 
function showThisName() {
	console.log(this.name);
}

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

call 메서드의 첫 번째 매개변수 == this 로 사용할 값

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

apply

call과 사용법이 비슷하지만 함수 매개변수를 배열로 받음.
동작 방식은 같음. 매개변수를 받는 방법만 다름.

다음과 같이 배열 형태는 스프레드 연산자를 이용해 매개변수로 넣어줄 수 있었다.

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

배열 매개변수는 차례대로 인수로 사용됨

apply를 사용해보자.

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

Math.min, Math.max는 this가 필요하지 않아 아무값이나 넣어주어도 된다.

bind

this 값을 영구적으로 바꿔줄 수 있다.

const mike = {
	name: "Mike";
}

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

const updateMike = update.bind(mike);

updateMike(1980, "police");
console.log(mike); // {name: "Mike", birthYear: 1980, occupation: "police"}

예시

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

user.showName(); // hello, Mike

let fn = user.showName(); 

fn(); // hello, 

method - .앞이 this!
this를 잃어버렸기 때문에 name이 출력되지 않음.

let boundFn = fn.bind(user);
boundFn(); // hello, Mike