Javascript call, apply, bind method 설명 및 예제

call

모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있음
∙ 기본 문법 : fun.call([thisObj[, arg[, arg2[, ...]]]])

 

❣️ 예시 1

const mike = {
	name: "Mike"
};

const tom = {
	name: "Tom"
}; 

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

showThisName();
showThisName.call(mike); // mike
showThisName.call(tom);  // tom 
// 첫번째 매개변수로 객체를 제공하면 this가 그 객체에 묶임 

❣️ 예시 2

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'); 
// (this로 사용될 값, 두번째부터는 함수가 사용할 매개변수를 순서대로 적어주면 됨) 
// fun.call([thisObj[, arg[, arg2[, ...]]]])

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

 

apply

함수 매개변수를 처리하는 방법은 call과 같음 단, apply는 매개변수를 배열로 받음

 

❣️ 예시 1

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.apply(mike, [1999, 'singer']); 

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

❣️ 예시 2

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

const minNum = Math.min.apply(null, nums);
const maxNum = Math.max.apply(null, nums);

console.log(minNum); // 1
console.log(maxNum); // 10 

// 여기서 call을 쓰고 싶은 경우 spread연산자 사용 
// const maxNum = Math.max.call(null, ...nums);

 

bind

함수의 this 값을 영구히 바꿀 수 있음

 

❣️ 예시 1

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"} 

❣️ 예시 2

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

user.showName(); // hello, Mike

let fn = user.showName; // this를 잃어버림 

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

let boundFn = fn.bind(user); 

boundFn();  // hello, Mike