#13 call, apply, bind

call

call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다.

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

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

// 해당 함수에서 접근 가능한 this가 없는 상태
function showThisName(){
    console.log(this.name);
}

showThisName(); // undefined
showThisName.call(mike); // Mike .call() 메서드를 이용하여 this를 사용할 수 있게 됨
showThisName.call(tom); // Tom  .call() 메서드를 이용하여 this를 사용할 수 있게 됨

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

// 인자값 이용 방법 : update.call (this를 사용할 객체 (mike), update 함수가 받을 인자1, 인자2)
update.call(mike, 1999,"singer");
console.log(mike);

update.call(tom, 2002, "teachar");
console.log(tom);

 

apply

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

call 은 일반적인 함수와 마찬가지로 매겨변수를 직접 받지만, apply는 매개변수를 배여로 받는다.

// apply에서 매개변수는 배열로 전달
update.apply(mike, [1999, "singer"]);
console.log(mike);

update.apply(tom, [2002, "teachar"]);
console.log(tom);

 

매개변수 전달 예제

// 배열의 최소, 최대값 구하기
const nums = [3, 10, 1, 6, 4, 21];
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);
console.log(minNum); // 1
console.log(maxNum); // 21

// call, apply 이용하여 매개변수 전달달
const minNum2 = Math.min.call(null, ...nums); 
// Math.min.call(null, 3, 10, 1, 6, 4, 21) 와 동일

const maxNum2 = Math.max.apply(null, nums);
// Math.max.apply(null, [3, 10, 1, 6, 4, 21]) 와 동일 

console.log(minNum2); //1
console.log(maxNum2); //21

 

bind  

함수의 this값을 영구히 변경할 수 있다

const kimo = {
    name: "Kimo",
};

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

// .bind를 이용하여 update함수 내의 this객체를 kimo객체 데이터로 고정
const updateKimo = update.bind(kimo);
updateKimo(1980, "police");
console.log(kimo);

// { name: 'Kimo', birthYear: 1980, occupation: 'police' }

 

전체 예제

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

user.showName();

let fn  = user.showName;

fn.call(user);
fn.apply(user);

let boundFn = fn.bind(user);
boundFn();

**********************
hello, Kimo
hello, Kimo
hello, Kimo
hello, Kimo