자바스크립트에서의 this란~

 

this의 본질  -  자바스크립트 완벽가이드 참고 및 정리

 

 

컨텍스트(context) 

자바스크립트 코드 실행시 인터프리터가 new키워드 or 리터럴 표기법 등을 만나면 heap메모리에 만들어지는 별도의 공간.

 

 

new 키워드 

- ex) new Person() 

 

 

리터럴 표기법 

ex) var obj={} , arr=[];

 

 

heap 메모리 

- 프로그램 동작 시 동적으로 할당되는 메모리를 위해 지정된 영역.

 

함수 호출에는 전달 인자외에도 호출 컨텍스트(invocation context)값이 포함되는데, 

이는 this 키워드의 값이다.

어떤 함수가 객체 상에서 호출되거나 객체를 통해 호출될 때, 

이 객체는 호출 컨텍스트이거나 호출된 함수에서 this값이다.

 

즉 this는 컨텍스트를 가리키되 실행 컨텍스트를 가리킨다.

더 쉽게 풀어 이야기 하자면  new 연산자를 통해 만들어진 

Object 객체의 키-값공간을 가리키는 것이고 

이때 컨텍스트가 this에 바인딩된다.

this에 바인딩된 컨텍스트를 실행 컨텍스트(excution context)라고 한다.

간단히 이러한 총 과정은 바로 함수를 호출할 때 일어난다.  

 

 

 

사용법

this는 키워드 이며 변수나 속성 이름이 아님을 유의하라
자바스크립트 문법은 this에 값을 할당하는 것을 허용하지 않는다.
변수와 달리 this키워드에는 범위가 없고 중첩 함수는 호출자의 this값을 상속하지 않는다.

 

 

중요 key-point

중첩함수가 메서드 형태로 호출시( myFunc.method(); )
     ---> 중첩 함수에서의 this 값은 그 함수가 속한 객체다.
 
중첩함수가 함수 형태로 호출시( func(); )                
     ----> 중첩 함수의 this값은 global객체(일반모드) 또는 undefined(엄격모드)중 하나다.

 

 

흔히 보이는 실수는 함수 형태로 호출된 중첩함수가 바깥쪽함수의 호출 컨텍스트를 획득하기 위해

this값을 사용할 수 있다고 가정하는 것이다.

만약 바깥쪽 함수의 this값에 접근하고 싶다면 안쪽 함수의 유효범위에 바깥쪽 함수의 this값을 별도의 변수로 저장해야 한다.

이러한 용도로 보통 self변수를 사용한다.

//아래 함수가 스크립트 태그 내에 전역적으로 선언한 함수라면

//내부에서 this는 window를 가르키게 된다.

//전역함수호출에서 this

function foo(){ //this }

foo();



//아래 myapp 객체의 func 함수 내에 this는 myapp을 가르킨다.

//객체 메서드 호출에서

this var myapp={};

myapp.func=function(){ };

myapp.func();



//중첩함수에서의 this

var o={ //객체 o

    m: function(){ //객체의 메서드 m

        var self=this; //this값을 변수에 저장한다.

        console.log( this=== o); // true. this는 객체o이다.

       f(); //이제 헬퍼 함수 f()를 호출한다.

       function f(){ //중첩함수

            console.log( this===o ); //false  this는 global객체 또는 undefined이다.

            console.log( self===o ); //true self는 바깥쪽 함수의 this값이다.

       }

    }

}

o.m(); //객체 o의 메서드 m을 호출한다.