[JAVA SCRIPT] this (1)

(1) 상황에 따라 달라지는 this

💡 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

• 그 객체 안에는 3가지가 존재한다.
  ✓ VariableEnvironment
  ✓ LexicalEnvironment
  ✓ ThisBindings

---

1. this는 실행 컨텍스트가 생성될 때 결정 = bind

this는 함수를 호출할 때 결정된다.

1. 전역 공간에서의 this

- 전역 공간에서 this는 전역 객체를 가리킴
- 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)를 각각 가리킴 -> (개발자도구 -> 콘솔에서 확인)

// <브라우저 환경에서 this 확인)
console.log(this);
console.log(window);
console.log(this === window);

// <node 환경 this 확인>
 console.log(this);
 console.log(global);
 console.log(this === global);

---

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

2-1 함수 vs 매서드

함수 는 그 자체로 독립적인 기능 수행 -> 전역객체

함수명();

매서드는 자신을 호출한 대상 객체에 대한 동작을 수행 -> 호출의 주체가 있음

객체. 메서드명()

2-2 this의 할당

// CASE1 : 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미
var func = function (x) {
	console.log(this, x);
};
func(1); // Window { ... } 1
//obj1.func() 이런식으로 호출을 하지 않았기 때문에 window 객체 일 수 밖에 없음 

----------------------------------------------------------------------

// CASE2 : 메서드
// 호출 주체를 명시할 수 있기 때문에 this는 해당 객체(obj)를 의미
// obj는 곧 { method: f }
var obj = {
	method: func,
};
obj.method(2); // { method: f } 2

2-3 호출 구분 기준

점(.) , 대괄호 ([])

• 어떤 걸 호출하든 결과는 같음

var obj = {
	method: function (x) { console.log(this, x) }
};
obj.method(1); // { method: f } 1
obj['method'](2); // { method: f } 2

2-4 메서드 내부에서의 this

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

---

3. 함수로서 호출할 때 (= 호출 주체를 알 수 없음) 그 함수 내부에서의 this

3-1. 함수 내부에서의 this

• 어떤 함수를 호출할 경우 this는 지정되지 않음 -> 호출 주체를 알 수 없어서
• 실행 컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this = 전역객체
• 함수로서 '독립적'으로 호출 -> this는 항상 전역 객체를 가리킨다

3-2. 메서드의 내부함수에서의 this

• 메서드 내부라고 해도 함수로서의 호출이면 전역객체

var obj1 = {
	outer: function() {
		console.log(this); // (1) obj1
		var innerFunc = function() {
			console.log(this); // (2) 전역객체, (3) obj2
		}
		innerFunc();

		var obj2 = {
			innerMethod: innerFunc
		};
		obj2.innerMethod();
	}
};
obj1.outer();

this 바인딩에 관해서는 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건

---

4. 메서드의 내부 함수에서의 this 우회

4-1. 변수를 활용하는 방법

• 내부 스코프에 이미 존재하는 this를 별도의 변수(self)에 할당

var obj1 = {
	outer: function() {
		console.log(this); // (1) outer

		// AS-IS
		var innerFunc1 = function() {
			console.log(this); // (2) 전역객체
		}
		innerFunc1();

		// TO-BE
		var self = this;
		var innerFunc2 = function() {
			console.log(self); // (3) outer
		};
		innerFunc2();
	}
};

// 메서드 호출 부분
obj1.outer();

4-2 화살표함수 (=this를 바인딩하지 않는 함수)

• ES6에는 this 바인딩 과정 자체가 없기 때문에 함수 내부에서 this를 전역객체로 바라보는 문제 때문에 화살표 함수를 도입함

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

obj.outer();

4-3 콜백 함수 호출 시 그 함수 내부에서의 this

콜백함수: 어떠한 함수, 메서드의 인자(매개변수)로 넘겨주는 함수

• 콜백함수도 함수이기에 this는 전역객체
• 콜백함수를 넘겨받은 함수에서 콜백함수에 별도로 this를 지정한 경우 -> 예외적으로 대상 참조

// 별도 지정 없음 : 전역객체
setTimeout(function () { console.log(this) }, 300);

// 별도 지정 없음 : 전역객체
[1, 2, 3, 4, 5].forEach(function(x) {
	console.log(this, x);
});

// addListener 안에서의 this는 항상 호출한 주체의 element를 return하도록 설계되었음
// 따라서 this는 button을 의미함
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e) {
	console.log(this, e);
});

1. setTimeout 함수, forEach 메서드는 콜백 함수 호출할때 this 지정하지 않았으므로 window 객체
2. addEventListner 메서드는 콜백함수 호출시 자신을 상속하므로 this는 addEventListner의 앞부분

---

5. 생성자 함수 내부에서의 this

5-1 생성자

• 구체적인 객체를 만들기 위한 일종의 틀

---