Javascript 코어개념 - this

this는 JavaScript에서 어떻게 작동하는지 설명해주세요.

✅ 상황에 따라서 달라지는 this

함수 호출 → 실행 컨텍스트 생성 → this 가 결정
⇒ 즉, 함수 호출될 때 this가 결정된다고 볼 수 있습니다.

• 전역공간 - this = window, global

---

1. 메서드로 호출시 this

함수 vs. 메서드
(함수와 메서드 모두 "미리 정의한 동작을 수행하는 코드 뭉치")

• 함수 : 자체로 독립적 기능 수행
• 메서드 : 메서드를 호출한 객체에 관한 동작 수행(종속적)
  (구분 : 함수 앞에 객체가 명시되어있는지 여부로 구분)
• 메서드 내부에서 호출시 this : 호출한 주체에 대한 정보가 담깁니다.

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

    obj.methodA(); //===obj**      //점 호출법
    obj["methodA"](); //===obj  //대괄호 호출법(결과는 동일)

    obj.inner.methodB(); //**===obj.inner**

---

2. 함수로 호출시 (함수 내부에서의) this

(함수를 함수로 호출시 this가 지정되지 않고 전역 객체를 바라봄.)

var obj1 = {
	outer : function () {
		console.log(this); //===obj1 (점으로 호출했기 때문) 
		var innerFunction = function () {
			console.log(this);  //===window전역객체 (함수로 호출했기 때문)
	}
	innerFunction();

	var obj2 = {
		innerMethod: innerFunction
		};
	obj2.innerMethod();
	}
};

obj1.outer();

this바인딩은 함수를 실행하는 당시의 주변 환경은 중요하지 않고, 오직 해당 함수를 **호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지**가 관건.

→ this라는 단어와 실제 결과값이 매치가 되지 않음. 주변 환경의 this를 그대로 상속받아 사용하는 편이 논리적으로 더 설득력이 있음 → 이렇게 동작하도록 우회하는 방법을 대개 사용함.

👋 var self = this;

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

	var self = this; //우회하는 방법(상위 스코프의 this를 변수에 저장하여**
	var innerFunction2 = function () {
		console.log(self); //내부함수에서 활용**
		};
	innerFunction2();
      //함수로 호출하지만 self를 활용해서 this가 outer를 바라볼 수 있도록 함.
obj1.outer();

👋 ES6의 화살표 함수

: this바인딩 단계 자체를 하지 않음 → 상위 스코프의 this를 그대로 활용!

따라서 위 방법처럼 우회할 필요 없음.

var obj = {
	outer : function () {
		console,log(this);  //===outer
		var innerFunction = () =>{
			console.log(this); **
              //===outer(상의 스코프의 this를 그대로 가져옴)**
		};
		innerFunction();
	}
};
obj.outer();

---

3. 콜백 함수 호출시 (그 함수 내부에서의) this

: 콜백 함수의 제어권을 가지는 함수(메서드)가 콜백 함수에서의 this를 무엇으로 할 지 결정. 특별히 정의하지 않은 경우에는 기본적으로 함수 호출과 마찬가지로 전역객체를 바라봄.

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

어떤 함수가 생성자 함수로서 호출된 경우, 함수 내부에서의 this === 새로 만들 인스턴스 자신이 됨.

var Cat = function (name, age) {
	this.bark = '야옹';
	this.name = name;
	this.age = age;
};

var choco = **new Cat('초코', 7); //함수 내부 this === choco 인스턴스 자신**
var nabi= **new Cat('나비', 5);  //함수 내부 this === nabi 인스턴스 자신**

console.log(choco, nabi);

---

결론

: this는 아래처럼 상황에 따라서 달라집니다.

• 전역공간에서this는 전역객체를 참조함(브라우저 : window, node.js : global)
• 메소드로 호출시 ( 그 함수 내부에서의) this === 호출한 주체(메서드명 앞의 객체)
• 함수로 호출시 ( 그 함수 내부에서의) this === this가 지정되지 않으므로 전역객체를 바라봄
• 콜백함수 호출시 ( 그 함수 내부에서의) this === 기본적으로 전역객체 바라보지만, 제어권가진 함수가 this지정시 해당 this로 결정됨.
• 생성자 함수 내부에서의 this === 새로 만들 인스턴스 자신

---

Reference

<코어 자바스크립트>