call(), apply(), bind()에 대해서

간단하게 짚고 넘어가자

이 세가지 메서드들의 용도는 함수 블록에서 this가 가리키는 객체를 명시해주기 위한 용도로 사용된다.

---

call(), apply()

이 둘은 기능이 같다고 보면 된다.
첫번째 파라미터에 타겟팅할 객체를 넘기고, 메서드에 필요한 인수를 가변인수에 넘길 수 있다.

 

예제

function Person(name, yearCount) {
    this.name = name;
    this.age = 0;
    let incrAge = function () {
        this.age++;
    };
    for (let i = 0; i <= yearCount; i++) {
        incrAge.call(this);
    }
}
let p1 = new Person('최우석', 20);
console.log(`${p1.name}님의 나이 ${p1.age}`);

---

bind()

이 메서드는 위의 메서드들과 기본적인 기능을 동일하다.
약간 다른 점이 있다면 this가 바인드된 함수를 반환한다는 거다.

예제

function Person(name, yearCount) {
    this.name = name;
    this.age = 0;
    let incrAge = function () {
        this.age++;
    };
    let bindFunc = incrAge.bind(this);
    for (let i = 0; i <= yearCount; i++) {
        bindFunc();
    }
}

let p1 = new Person('최우석', 20);
console.log(`${p1.name}님의 나이 ${p1.age}`);