스파르타코딩클럽 내일배움캠프 TIL27

This

• 다른 객체지향 언어에서는 this는 곳 클래스로 생성한 인스턴스를 말한다.
• 자바스크립트에서는 this가 어디에서나 사용될 수 있다.

상황에 따라 달라지는 this

• this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정
  • 전역 공간에서의 this
    • 전역 공간에서 this는 전역 객체를 가리킴
    • window(브라우저 환경), global(node 환경)

console.log(this);
console.log(window);
console.log(this === window); //true

• 메서드로서 호출할 때 그 메서드 내부에서의 this
  • 함수 vs 메서드
    • 기준 : 독립성
    • 함수 : 그 자체로 독립적인 기능을 수행
    • 메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행
• 함수와 메서드가 호출될 때, this는 각각 다르게 할당

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

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

• 메서드 내부에서의 this

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

• 함수로서 호출할 때 그 함수 내부에서의 this
  • 함수 내부에서의 this
    • 어떤 함수를 함수로서 호출할 경우, this는 지정되지 않음(호출 주체가 없으므로)
    • 실행컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this는 전역 객체를 바라봄
    • 따라서, 함수로서 ‘독립적으로’ 호출할 때는 this는 전역 객체
  • 메서드의 내부함수에서의 this
    • 메서드의 내부라고 해도, 함수로서 호출한다면 this는 전역 객체
    • this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건임!
    • 하지만 그럼에도 불구하고 doesn’t make sense!
  • 메서드의 내부 함수에서의 this 우회
    • 변수 활용

var obj1 = {
	outer: function() {
		console.log(this);
		var innerFunc1 = function() {
		console.log(this);
	}
	innerFunc1();

var self = this;
var innerFunc2 = function() {
	console.log(self);
	};
	innerFunc2();
	}
};
obj1.outer();

• 화살표 함수
  • ES6에서 처음 도입된 화살표 함수는, 실행 컨텍스트를 생성할 때 this 바인딩
    과정 자체가 없음(따라서, this는 이전의 값-상위값-이 유지됨)

var obj = {
	outer: function() {
		console.log(this);
		var innerFunc = () => {
			console.log(this);
		};
	innerFunc();
	}
}
obj.outer();