javascript #함수 호출 시 call(), apply() 로 this 설정

함수 호출 방법에 따른 this의 변화를 확인합니다.

function whatsThis() {
    return this.toString();
}

let unikys = {
    what: whatsThis,
    toString: function () {
        return "[object unikys]";
    }
}

 

#1 whatsThis();  //"[object Window]"

    일반함수: this = window

#2 unikys.what();  //"[object unikys]"

    멤버함수: this = unikys

#3 whatsThis.call();  //"[object Window]"

    call 이용, 인자 없음: this = window

#4 whatsThis.apply(unikys);  //"[object unikys]"

    apply 이용, 첫 번째 인자 unikys: this = unikys

#5 unikys.what.call(undefined);  //"[object Window]"

    멤버함수로 call 이용, 인자 없음: this = window

#6 unikys.what.call(unikys);  //"[object unikys]"

    멤버함수로 call 이용, 첫 번째 인자 unikys: this = unikys

 

결과

call()이나 apply()함수를 이용한 함수 호출에서는 첫 번째 인자로 설정한 객체가 this로 설정되며, 인자가 넘어가지 않을 때는 일반 함수 호출과 같이 글로벌 객체인 window가 this로 설정됩니다.

 

#1과 같이 일반적으로 함수가 호출될 때는 내부적으로 call() 함수로 변형되어 처리됩니다.  이때 call() 함수의 첫 번째 인자를 undefined로 넘겨주어 this의 기본값으로 window가 들어가게 됩니다.

 

#2의 예에서는 첫 번째 인자로 unikys가 넘어가기 때문에 this는 unikys가 됩니다. 하지만 호출되는 방법이 달라지면 this는 변경될 수 있습니다.

ex)  let newWhat = unikys.what;

      newWhar(); //==> "[object Window]"

이렇게 this는 함수나 스코프 기반으로 결정되는 것이 아닌 호출 방법에 따라 변경됩니다.

 

 

 

 

참고도서 : 속깊은 자바스크립트