call, apply, bind 메서드

🧐 명시적으로 this를 바인딩하는 방법의 크게 세 가지를 오늘 살펴보려고 한다.

바인딩은 뭘까? 쉽게 말해서 묶는다는 뜻이다. 특정한 이름이나 값이나 기능을 묶어서 사용하겠다는 의미이다. 어떤 키보드에 A에 특정한 동작인 점프를 묶어서 프로그램을 만들었다. 이제 A키를 누르면 점프하는 동작이 실행된다. 단축키가 바인딩이다.  

 

1️⃣ call 메서드 

- call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다. 이때 call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. 

 

- call 메서드 예시

let obj = {
    a: 1,
    method: function (x, y) {
        console.log(this.a, x, y);
    }

};

// 1, 2, 3
obj.method(2, 3);

// 4, 5, 6
obj.method.call({ a: 4}, 5, 6)

 

위에서 봤듯이 call의 첫 번째 인자가 this로 바인딩이 되어서 이전에는 a가 1을 가리켰는데 이제는 this가 call의 첫 번째 인자를 가리키니까 a는 4를 가리키게 된다.

 

2️⃣ apply 메서드 

 - apply 메서드도 call 메서드와 비슷한데 차이가 있다면 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다. 

 

- apply 메서드 예시

let obj = {
    a: 1,
    method: function (x, y) {
        console.log(this.a, x, y);
    }

};

// 4, 5, 6
obj.method.call({ a: 4 }, 5, 6);

 

3️⃣ bind 메서드

 - bind 메서드는 ES5에서 추가된 기능으로, call과 비슷하지만 즉시 호출하지 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 

- bind 메서드는 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 모두 지닌다. 

 

- bind 메서드 예시

let func = function(a, b, c, d) {
    console.log(this, a, b, c, d);

};

// window{ ... } 1 2 3 4
func(1, 2, 3, 4);


let bindFunc1 = func.bind({ x: 1});

// { x:1 } 5 6 7 8
bindFunc1(5, 6, 7, 8);

let bindFunc2 = func.bind({ x: 1}, 4, 5);

// { x: 1} 4 5 6 7
bindFunc2(6, 7);

// { x: 1} 4 5 8 9
bindFunc2(8, 9);

- 바로 위에 두 줄에서 6, 7을 넘긴 부분에서 보면 this 값이 바뀐 것을 제외하고는 최초 func 함수에 4, 5, 6, 7을 넘긴 것과 같은 동작을 한다. 

 

3️⃣-1. bind 메서드

- bind 메서드를 적용해서 새로 만든 함수는 한 가지 독특한 성질이 있다. 바로 name 프로퍼니 동사 bind의 수동태인 bound 가 접두어로 붙는다.

- 어떤 함수의 name 프로퍼티가 "bound xxx"라면 이는 곧 함수명이 xxx인 원본 함수에 bind 메서드를 적용한 새로운 함수라는 의미가 되므로 기존의 call이나 apply보다 코드를 추적하기에 수월해진 면이 있다.

let func = function (a, b, c, d) {
    console.log(this, a, b, c ,d);
};

let bindFunc = func.bind({ x: 1}, 4, 5);
// func
console.log(func.name);
// bound func
console.log(bindFunc.name);

Ex) bind 메서드 - 내부함수에 this 전달

let obj = {
    logThis: function() {
        console.log(this);
    },
    
    logThisLater1: function() {
       setTimeout(this.logThis, 500);
    },

    logThisLater2: function() {
       setTimeout(this.logThis.bind(this), 1000);
    },


};
// Window { ... }
obj.logThisLater1();
// obj { logThis: f, ...}
obj.logThisLater2();

 

4️⃣ 화살표 함수의 예외사항 

ES6에 새롭게 도입된 화살표 함수는 실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외되었다. 즉 이 함수 내부에는 this가 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근하게 된다. 

let obj = {
    outer: function () {
        console.log(this);
        let innerFunc = () =? {
            console.log(this);
       
        };
        innerFunc();
    
    }

};

obj.outer();

 

5️⃣ 별도의 인자로 this를 받는 경우(콜백 함수 내에서의 this)

Ex) forEach 메서드

let report = {
    sum: 0,
    count: 0,
    add: function() {
        let args = Array.prototype.slice.call(arguments);
        args.forEach(function (entry) {
            this.sum += entry;
            ++this.count;
        
        }, this);
    },
    average: function() {
        return this.sum / this.count;
    }
};
report.add(60, 85, 95);
// 240 3 80
console.log(report.sum, report.count, report.average());

콜백 함수 내부에서의 this는 add 메서드에서의 this가 전달된 상태이므로 add 메서드의 this(report)를 그대로 가리키고 있다. 

 

6️⃣ 콜백 함수와 함께 thisArg를 인자로 받는 메서드

Array.prototype.forEach(callback[, thisArg])
Array.prototype.map(callback[, thisArg])
Array.prototype.filter(callback[, thisArg])
Array.prototype.some(callback[, thisArg])
Array.prototype.every(callback[, thisArg])
Array.prototype.find(callback[, thisArg])
Array.prototype.findIndex(callback[, thisArg])
Array.prototype.flatMap(callback[, thisArg])
Array.prototype.from(callback[, thisArg])
Set.prototype.forEach(callback[, thisArg])
Map.prototype.forEach(callback[, thisArg])