JS, this?

This?

Java의 this는 현재 객체 자기 자신을 가리키는 키워드입니다.

자바스크립트 또한 this라는 개념이 있습니다. 하지만 객체 자기 자신을 가리키는 키워드가 아닙니다?!

자바스크립트에서 this는 함수의 현재 실행 문맥(Context) 가리킵니다!

결국 this를 이해하는 것은 함수 실행이 문맥에 어떤 영향을 미치는지 아는 것을 말합니다.

우선 자바스크립트에서는 4가지 함수의 실행 타입이 있습니다.

• 함수 실행: alert('Hello World!')
• 메소드 실행: console.log('Hello World!')
• 생성자 실행: new RegExp('\d')
• 간접 실행: alert.call(undefined, 'Hello World!')

각각의 실행타입은 서로 다른 각각의 문맥(Context)을 가집니다.
따라서 실행 타입에 따라 this가 다르며, 각각의 실행타입별로 this를 살펴보겠습니다.

<br/>
<br/>
먼저 함수 실행의 경우입니다.

함수 실행에서의 this는 전역객체 입니다.

전역객체는 실행환경에 따라 결정됩니다.

웹브라우져에서는 **window객체가 전역객체 **입니다.

다음 코드를 보면, this는 window객체 임을 확인 할 수 있습니다.

function foo(){
	console.log(this) // window;
}
foo();

함수 실행에서는 this가 전역객체이며, 따라서 웹브라우저의 실행환경에서는 this는 window객체 입니다.

<br/>
<br/>
다음은 메소드 실행의 경우입니다.

메소드는 객체가 속성으로 가지는 함수입니다.

우선 함수 실행과 메소드 실행이 어떻게 다른지를 알아야 합니다.

둘의 가장 큰 차이점은 메소드 실행은 속성 접근자를 통해서 함수를 호출한다는 것입니다.

다음 코드를 보면 쉽게 이해할 수 있습니다.

var obj = {
	foo : function(){
  	console.log(this);
  }
}

obj.foo(); //메소드 실행
var f = obj.foo;
f(); // 함수 실행

7번줄은 객체의 속성접근자로 함수를 호출하였고, 따라서 메소드 실행입니다.

9번줄은 단지 함수를 호출하였기 때문에, 함수 실행입니다.

그럼 메소드 실행에서의 this는 무엇일까요?

객체내에 있는 메소드를 실행할 때, 여기서의 this는 객체 자신을 가리킵니다.

var obj = {
	foo : function(){
  	console.log(this); // Obj
  }
}
obj.foo(); //메소드 실행

<br/>
<br/>
<br/>
그럼 내부 함수에서는 어떨까요? 함수안에 함수가 있는 경우 입니다.

다음 코드를 보면,

var obj = {
	foo : function(){
  	console.log(this); // obj

  	function inFoo(){
    	console.log(this); // Window
    }
    inFoo();
  }
}
obj.foo(); //메소드 실행

obj.foo()는 메소드 실행입니다. 따라서 this는 obj를 출력합니다.

inFoo()는 함수 실행입니다. 따라서 this는 window 입니다.

그럼 다음 경우는 어떨까요?

var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this); // numbers
     function calculate() {
       console.log(this); // window
       return this.numberA + this.numberB;
     }
     return calculate();
   }
};
numbers.sum();  // NaN

numbers.sum()은 결국 calculate() 함수 호출입니다. 따라서 this는 window객체입니다.

하지만 8번 라인에서 calculate()는 this.numberA + this.numberB를 반환하려하니 값이 없어 NaN값을 반환합니다.

<br/>

참고

<a href="https://github.com/FEDevelopers/tech.description/wiki/자바스크립트에서-사용되는-this에-대한-설명-1#1-this에-대한-미스터리">자바스크립트에서 사용되는 this에 대한 설명 1</a>