call, apply, bind

🔔 call, apply, bind: 함수 호출 방식과 관계 없이 this를 지정할 수 있다.

📌 call

const mike = {
    name: ‘Mike’
}

const tom = {
    name: ‘Tom’
}

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

showThisName(); // undefined

showThisName.call(mike); // ‘Mike’
showThisName.call(tom); // ‘Tom’

• 최초 showThisName() 을 호출하면 undefined를 반환.
• 함수에 this를 지정해줘야 기대하는 결과가 나옴.
• call()은 this로 지정될 객체를 매개변수로 받는 함수.

// this가 바라보는 객체는 위 코드의 mike 객체 참조

function update(birth, job) {
   this.birthday = birth;
   this.job = job;
}

update.call(mike, 1989, ‘Enginner’); // { name: ‘Mike’, birthday: 1989, job: ‘Enginner’ } 

• call()의 첫 번째 매개변수는 this가 될 객체이다.
• 두 번째 매개변수는 실제 동작하는 함수에 전달하는 매개변수이다.
• 위 예시에서는 1989가 birth로, Enginner가 job으로

📌 apply

// 위 코드의 mike 객체와 update 함수 참조

update.apply(mike, [ 1989, ‘Enginner’ ]); // { name: ‘Mike’, birthday: 1989, job: ‘Enginner’ }

• apply()는 매개변수가 아닌 배열의 형태로 함수의 매개변수를 전달.
• 배열요소를 함수의 매개변수로 사용할 때 유용하다.

const nums = [2, 5, 1, 45, 13];

const numMin = Math.min(nums); // NaN
const numMax = Math.max(nums); // NaN

• nums가 배열이기 때문에 자료형이 맞지않아 NaN이 반환.
• 이를 call()로 전달 하기 위해서는 전개 구문 사용
• 전개 구문은 전달하는 매개변수의 개수가 정해지지 않은 상황에 사용.

// 전개 구문을 통해 값을 함수에 전달하기
const nums = [2, 5, 1, 45, 13];

const numMin = Math.min(…nums); // 1
const numMax = Math.max(…nums); // 45

• 전개 구문으로 배열의 요소를 함수에 전달 하였고 각 변수에 할당

// apply 함수 사용하기

const nums = [2, 5, 1, 45, 13];

const numMin = Math.min.apply(null, nums); // 1
const numMax = Math.max.apply(null, nums); // 45

• apply()는 배열요소를 매개변수로 전달한다.
• null이 들어가는 이유는 Math를 this로 전달할 필요가 없기 때문이다.
• call(),apply() 모두 첫 번째 매개변수는 this를 지정해주는 역할 이다.(위에서 알아보았다)

📌 bind

const user = {
    name: ‘Jane’,
    showName: function () {
        console.log(this.name);
    }
}

user.showName(); // Jane

const fn = user.showName;
fn(); // undefined

• 이 경우 fn에 user.showName을 할당하면서 this를 잃어버림.
• 이 때 bind()로 함수의 this 값을 user 객체를 영구히 바라보게 할 수 있다.

const user = {
    name: ‘Jane’,
    showName: function () {
        console.log(this.name);
    }
}

let fn = user.showName();
let boundFn = fn.bind(user);
boundFn(); // Jane