[JavaScript] This와 Call, Apply, Bind

안녕하세요. J4J입니다.

 

이번 포스팅은 this와 call, apply, bind에 대해 적어보는 시간을 가져보려고 합니다.

 

 

This란?

 

this라고 하는 것은 코드를 실행한 object를 의미합니다.

 

그리고 다음 코드와 같이 일반적으로 어느 상황에서든 this값을 출력해보면 항상 Window가 출력이 됩니다.

 

<script>
    function log() {
        console.log(this);
    }

    log(); // Window 출력

    console.log(this); // Window 출력
</script>

 

 

하지만 이런 this값이 바꿔지는 경우도 당연히 존재하고 다음과 같은 방법들이 있습니다.

 

• 객체 내부에 함수 선언
• new키워드 사용
• call, apply, bind 메서드 사용

 

 

객체 내부에 함수 선언

 

객체 내부에 함수를 선언하는 예제 코드는 다음과 같은 코드가 있습니다.

 

<script>
    let obj = {
        a: 3,
        log: function() {
            console.log(this);
        }
    }

    obj.log(); // {a: 3, log: ƒ}
</script>

 

 

obj라는 이름의 객체 내부에 log라는 함수를 선언하여 this를 출력해봤습니다.

 

그 결과 {a: 3, log: f}라는 결과가 나왔고 이 값은 즉 obj를 출력했다고 볼 수 있습니다.

 

this값이 Window가 아닌 obj로 변경된 것을 확인할 수 있습니다.

 

 

하지만 여기서 다음과 같이 코드를 변경해보겠습니다.

 

<script>
    let obj = {
        a: 3,
        log: function() {
            console.log(this);
        }
    }

    let nextObj = obj.log;
    nextObj(); // Window
</script>

 

 

obj.log()라는 함수는 새로운 nextObj값에 저장을 하고 nextObj값을 실행시켰더니 this값이 다시 Window로 변경된 것을 확인할 수 있습니다.

 

this값이 변경된 이유는 해당 코드를 실행한 주체가 obj가 아닌 nextObj이기 때문입니다.

 

그리고 nextObj는 위에서 말한 this가 변경되는 조건에 해당되는 것이 없기 때문에 this는 Window를 바라보고 있는 것입니다.

 

 

반응형

 

 

new키워드 사용

 

new키워드를 사용하는 예제는 다음과 같은 코드가 있습니다.

 

<script>
    function Log() {
        this.a = 3;
        this.b = 4;
    }

    Log.prototype.getThis = function() {
        console.log(this);
    }

    const log = new Log();
    log.getThis(); // Log {a: 3, b: 4}
</script>

 

 

위의 코드처럼 new 키워드를 이용했더니 log.getThis()라는 결괏값이 Window가 아닌 Log를 출력하는것을 확인할 수 있습니다.

 

 

Call, Apply, Bind

 

call, apply, bind는 함수객체에서 사용되는 메서드들로 this값을 바인딩해줄 때 사용합니다.

 

call의 사용방법은 첫 번째 파라미터에 this를 바인딩할 객체 값을 넣어주고 그 이후로는 함수에서 사용될 파라미터들을 나열하여 넣어주면 됩니다.

 

apply의 사용방법은 call과 마찬가지로 첫 번째 파라미터에 this를 바인딩할 객체 값을 넣어주고 그 이후로는 함수에서 사용될 파라미터들을 배열로 넣어주면 됩니다.

 

bind는 call과 apply와 조금 다릅니다.

 

call과 apply는 this를 바인딩하며 바로 함수가 실행되지만 bind같은 경우는 파라미터 값에 바인딩 할 객체를 넣으면 새로운 함수를 생성해줍니다.

 

그리고 만들어진 함수에 기존 함수의 파라미터를 집어넣어서 사용할 수 있습니다.

 

call, apply, bind의 예제코드는 다음과 같습니다.

 

<script>
    const personA = {
        name: 'personA',
        age: 10,
    }

    const personB = {
        name: 'personB',
        age: 13,
    }
    
    const personC = {
        name: 'personC',
        age: 11,
    }

    function getInfo(weight) {
        console.log(`${this}, ${weight}`);
    }

    getInfo(41); // Window, 41
    getInfo.call(personA, 43); // {name: "personA", age: 10}, 43
    getInfo.apply(personB, [37]); // {name: "personB", age: 13}, 37

    const bindGetInfo = getInfo.bind(personC);
    bindGetInfo(39); // {name: "personC", age: 11}, 39
</script>

 

 

코드에 대해 간단히 설명을 드리면 getInfo를 그대로 사용할 경우 this는 Window를 지칭합니다.

 

call을 사용하게 될 경우에는 첫 번째 파라미터에 personA값을 넣었기 때문에 this는 personA로 바인딩이 되었습니다.

 

apply를 사용하게 될 경우에는 첫 번째 파라미터 personB값을 넣었기 때문에 this는 personB로 바인딩이 되었습니다.

 

bind를 사용하게 될 경우 파라미터값으로 넣은 personC값이 this가 되어 새로운 함수가 생성되었고 그 이후부터는 getInfo를 사용하는 것과 동일한 방식으로 사용될 수 있습니다.

 

 

 

 

 

이상으로 this와 call, apply, bind에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.