🐇 What is this ❓

• 자신이 속한 객체/생성할 인스턴스를 가르키는 자기참조 변수(self-reference variable)
• 자신이 속한 객체/생성할 인스턴스의 Property/Method를 참조할 수 있음
• JavaScript Engine에 의해 암묵적으로 생성됨
• 코드 어디서나 참조 가능하지만 객체의 Property/Method를 참조하기위한 자기참조 변수이므로 일반적으로 객체의 Method 내부/생성자 함수 내부에서만 의미가 있음.
• 함수 호출 시 인자와 this가 암묵적으로 함수 내부에 전달됨
• 함수 내부에서 인자와 this를 지역 변수처럼 사용할 수 있음.
• this가 가르키는 값 (this 바인딩) 은 함수 호출 방식에 의해 동적으로 결정됨
  • 바인딩은 식별자와 값을 연결하는 과정
  • 변수 선언 시 변수이름 및 확보된 메모리 공간의 주소를 바인딩
  • this 바인딩은 this와 가르킬 객체를 바인딩 하는 것

---

This는 마음대로 변해

• 호출에 따른 this 바인딩
• 전역 사용 시 this
• 객체의 메소드 함수에서 this case

🐇 호출에 따른 this 바인딩

일반	객체 내 Method	생성자 함수
window	Method를 포함한 객체	생성된 인스턴스

🐇 전역 사용 시 this

• 함수를 바로 호출할 시

function example() {
	//반환값은 window 객체가 된다
	return this;
}
example(); // = window object

• 함수를 new 연산자를 통해 생성할 시

function example() {
	this.word = "this";
	return this;
}
//new 연산자를 이용해 새로운 객체를 얻는다.
const ex = new example();
ex; //example {word: "title"}

🐇 객체의 메소드 함수에서 this case

🥕 Object의 Method

• 객체 내 함수에서 this사용은 객체를 참조한다

🥕 High Function의 Callback의 Method

• 고차함수에서 콜백함수는 일반함수이다. 일반함수에서 this사용은 전역객체를 참조한다.
  즉 객체 내 함수의 콜백함수에서 this사용은 window이다.

🥕 Use reference in Callback

• 콜백함수에 참조할 this객체를 전달함

🥕 Lexical this in Array function

• 화살표 함수로 선언, 이 안에서 this는 언제나 상위 scope의 this를 가르킴. 이를 Lexical this라 함
  • 일반함수 : 함수 호출방식에 따라 this에 바인딩 될 객체가 동적으로 결정
  • 화살표함수 : 함수 선언 시 this에 바인딩 될 객체가 정적으로 결정

function example() {
	title: "this",
	words: ["t","h","i","s"],
	showWords() {
		this.words.forEach(function(word) {	//객체 내 함수에서 this는 객체
			console.log(word, this); //고차함수의 콜백함수 내 this는 window
		});
	}
}

//위 해결방법으로 콜백함수에 참조할 객체를 전달함.
this.words.forEach(function(word) {
	...
}, this); //객체 내 함수이므로 this는 객체

this.words.forEach((word) => {
	console.log(word, this); //Lexical this는 상위 scope, 즉 객체를 this로 받음
});