[Javascript] this

this가 가리키는 것

this는 현재 실행의 문맥이라고 볼 수 있다.
그러므로, 각 상황에 따라 this는 서로 다른 것을 가리키고 있다.

1. 전역 공간에서 호출하는 경우

    console.dir(this);
   

   다음과 같이 전역 공간에서 호출할 때에는 this는 다음을 가르킨다.

   • Browser를 핸들링하고 있는 경우에는 window 객체
   • node.js를 사용하고 있는 경우에는 global 객체

2. 함수 내부에서 호출하는 경우

    function myFunc(){
        console.dir(this);
    }
   
    myFunc();
   

   위처럼 함수 내부에서 호출하는 경우, 전역 공간에서 호출하는 것과 같은 의미를 지닌다.

   • Browser를 핸들링하고 있는 경우에는 window 객체
   • node.js를 사용하고 있는 경우에는 global 객체

3. 메소드에서 호출하는 경우

    var myObj = function(){
        val : 'method'
        myFunc : function(){
            console.dir(this.val);
        }
    }
    myObj.myFunc();
   

   위처럼 메소드로 호출하는 경우에는 해당 메소드를 호출하는 instance를 가르킨다.

4. 생성자 함수

    var myObj = function(a, b){
        this.a = a;
        this.b = b;
    }
   

   위의 경우도 this는 myObj를 가르키며 객체 요소에 값을 할당한다.

5. 콜백 함수

   콜백함수는 상황에 따라 this가 가리키는 것이 다 다를 수 있다.

    function controlFunc(callbackFunc){
        callbackFunc();
    }
   
    function callbackFunc(){
        console.dir(this);
    }
   

   위와 같은 경우에는 일반적인 함수와 마찬가지로 this는 window/global 객체를 가리킨다.

    function controlObj(){
        myMethod: function(callbackFunc){
            callbackFunc(this);
        }
    }
   
    function callbackFunc(){
        console.dir(this);
    }
   
    controlFunc.myMethod();
   

   다음으로 위와 같은 경우에는, callbackFunc의 this는 자신을 호출하는 controlObj를 가리킨다.

    function callbackFunc(){
        console.dir(this);
    }
   	
    var bindObj = {
        a : 1
    }
   
    setInterval(callbackFunc.bind(bindObj), 1000);
   

   마지막으로, 위와 같이 개발자가 직접 this에 어떤 것을 할당할지 bind하는 경우가 있다.
   이 경우 콜백함수에서 this가 가리키는 것은 binding한 bindobj가 된다.

   정리하자면 콜백에서는 다음과 같은 특징을 가진다.

   • 기본적으로는 window 또는 global를 가리킨다.
   • 제어권을 가진 함수가 callback 호출에 this를 명시한 경우에는 그에 따른다.
   • 직접 binding 해준 경우 그를 따른다.

bind란?

개발자가 직접 this를 특정 값으로 지정해줄수 있다.
이러한 binding 작업은 아래 세 개의 함수로 할 수 있다.

• bind
• call
• apply

function myFunc(a, b, c){
	console.dir(this, a, b, c);
}

var bindTarget = {
	test : 0
}

/**
 *  아래의 4가지 표현은 모두 같은 동작을 한다.
 */
myFunc.call(bindTarget, 1, 2, 3);

myFunc.apply(bindTarget, [1,2,3]);

var bindFunc1 = myFunc.bind(bindTarget);
bindFunc1(1, 2, 3);

var bindFunc2 = myFunc.bind(bindTarget, 1, 2);
bindFunc2(3);