[JavaScript] 14. call , apply , bind

Zero·2023년 2월 12일
0

JavaScript

목록 보기
14/35
post-thumbnail

call, apply , bind

함수 호출 방식과 관계없이 this를 지정할 수 있다.

call

const mike = {
 	name: "Mike", 
}
const tom = {
 	name: "Tom", 
}

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

showThisName(); 

-> 다음에선 아무런 출력이 없음 왜냐하면 this는 현재 윈도우인데 윈도우는 ""이기 때문

showThisName.call(Mike);

-> 다음처럼 실행하면 call을 통해 this를 Mike로 지정해주어 Mike가 출력된다. 

  • 다음에서 마찬가지로 call을 통해 this 를 지정해주면 this가 성공적으로 지정되어 출력된다.

apply

call과 매개변수를 처리하는 방식만 빼면 동일하다.
call은 매개변수를 직접 받지만 , apply는 배열 형태로 매개변수를 받는다.

const mike = {
 	name: "Mike", 
}
const tom = {
 	name: "Tom", 
}

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

update.apply(mike, [1999, "singer"]);
console.log(mike);

update.call(tom, 1989, "Dancer");
console.log(tom)

--> 매개변수를 처리하는 방식이 다른 call과 apply

bind

bind를 사용하면 함수의 this 값을 영구히 바꿀 수 있다.

const mike = {
 	name: "Mike", 
}

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

// 이렇게 되면 updateMike는 항상 this가 mike로 바인딩된다.
const updateMike = update.bind(mike);

updateMike(1999,'police');

0개의 댓글