this(🚧)

this

다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다.

따라서 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 많지 않다만, 자바스크립트에서의 this는 어디서든 사용이 가능하기 때문에 자바스크립트에서는 꽤나 혼란스러운 개념으로 여겨진다.

상황에 따라

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다.

실행 컨텍스트는 함수를 호출할 때 생성됨.

바꿔 말하면, this는 함수를 호출할 때 결정된다.

전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다.

전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있다.

var a = 5;
console.log(a);				//5
console.log(window.a);			//5
console.log(this.a);			//5

전역 공간에서 선언한 변수 a에 5를 할당했는데 window.a와 this.a 모두 5가 출력된다.

전역 공간에서의 this는 전역객체를 의미하므로 두 값이 같은 값을 출력하는 것은 당연하지만, 그 값이 5인 것은 의아하다. 그 이유는 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티로서 동작하기 때문이다.

사용자가 var 연산자를 이용해 변수를 선언하더라도 실제 자바스크립트 엔진은 어떤 특정 객체의 프로퍼티로 인식한다. 특정 객체란 바로 실행 컨텍스트의 LexicalEnvironment이다.

실행 컨텍스트는 변수를 수집해서 L.E의 프로퍼티로 저장하고 이후 어떤 변수를 호출하면 L.E를 조회해서 일치하는 프로퍼티가 있을 경우 그 값을 반환한다. 전역 컨텍스트의 경우 L.E는 전역객체를 그대로 참조한다.

전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다.

그럼 window.a나 this.a가 5가 나오는 이유는 설명 되는데, a를 직접 호출할 때도 5가 나오는 까닭은 무엇일까?

이는 변수 a에 접근하고자 하면 스코프 체인에서 a를 검색하다가 가장 마지막에 도달하는 전역 스코프의 L.E, 즉 전역객체에서 해당 프로퍼티 a를 발견해서 그 값을 반환하기 때문이다.

원리는 이렇지만 단순하게 (window. )이 생략된 것이라고 여겨도 무방하다.

메서드로서 호출할 때 그 메서드 내부에서의 this

어떤 함수를 실행하는 가장 일반적인 방법 두 가지는 함수로서 호출하는 경우와 메서드로서 호출하는 경구가 있다. 함수와 메서드를 구분하는 유일한 차이는 독립성에 있다.

함수는 그 자체로 독립적인 기능을 수행 / 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행함.

자바스크립트는 상황별로 this 키워드에 다른 값을 부여하게 함으로써 이를 구현.

var func = function(x){
  console.log(this, x);
};
func(1);	//Window {...}1

var obj = {
  method: func
};
obj.method(2);	// {method: f}2

• func라는 익명함수를 할당

• 4번째 줄 func호출, this로 전역객체 Window 출력.

• 6번째줄 obj라는 변수에 객체 할당, 객체의 method 프로퍼티에 func함수 할당

• 9째 줄에 obj의 method 호출, 이번에는 this가 obj.

  obj의 method프로퍼티에 할당한 값과 func 변수에 할당한 값은 모두 1번째 줄에서 선언한 함수를 참조.

• 즉 원래의 익명함수는 그대로 / 이를 변수에 담아 호출한 경우와 obj객체의 프로퍼티에 할당해서 호출한 경우에 this가 달라짐.

=> 함수로서 호출, 메서드로서 호출 구분 방법은 함수 앞에 점(.)이 있는지 여부만으로 간단하게 구분 가능

var obj ={
	method: function(x){console.log(this, x);}  
};
obj.method(1);	// 점 표기법 {method: f } 1
obj.['method'](2);	// 대괄호 표기법 {method: f } 2

메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담긴다. 어떤 함수를 메서드로서 호출하는 경우 호출 주체는 바로 함수명(프로퍼티명) 앞의 객체이다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 되는 것이다.

var obj = {
  methodA: function (){console.log(this);},
  inner: {
    methodB: function (){console.log(this);}
  }
};
obj.methodA();		//{methodA: f, inner: {...}}	(===obj)
obj['methodA']();	//{methodA: f, inner: {...}}	(===obj)

obj.inner.methodB();		//{methodB: f}	(===obj.inner)
obj.inner['methodB']();		//{methodB: f}	(===obj.inner)
obj['inner'].methodB();		//{methodB: f}	(===obj.inner)
obj['inner']['methodB']();	//{methodB: f}	(===obj.inner)

함수로서 호출할 때 그 함수 내부에서의 this

함수 내부에서의 this

어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않는다.(this에는 호출한 주체에 대한 정보가 담김)

함수로서 호출하는 것은 호출 주체(객체지향 언어에서의 객체)를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 것이기 때문에 호출 주체의 정보를 알 수 없는 것.( 실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다)

따라서 함수에서의 this는 전역 객체를 가리킴.

메서드의 내부함수에서의 this