[자바스크립트] this

---

▷ 바인딩

바인딩은 식별자( 변수 )와 값을 연결하는 과정을 말한다.

그래서 변수의 선언은 변수 이름이 확보된 메모리 공간의 주소를 바인딩하는 것이다.

어떤걸 가리킨다고 말해도 되고, 참조한다고 말해도 된다.

여기서는 this가 주인공이니까 this바인딩을 소개한다.

우선 this는 항상 어떠한 상위 객체를 바인딩한다고 한다.

이제 this가 어떤 상위 객체를 바인딩하는지 알아보자.

---

▷ this를 왜쓰는지

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 바인딩하는 자기 참조 변수이다.

그래서 this를 이용하면 그런 객체나 인스턴스의 프러퍼티나 메서드를 참조할 수 있다.

일반적으로 this바인딩은 함수의 호출 방식에 의해 동적으로 결정되기 때문에,

크게 일반 함수 내부와 메서드 내부에서의 사용으로 나누어서 this사용법을 알아보자.

'전역에 선언된 함수'와 '객체 안에서 선언된 함수'를 구분하기 위해 후자를 메서드라고 부른다.

---

▷ 일반 함수 내부에서 this

1. 일반 함수 그냥 호출할 때 : window객체

#1

function user() {
	console.log(this); // window {...} 
}                

user(); 

자바스크립트에는 코드 전체를 감싸고 있는 최상위 객체인 `window`객체가 보이지 않게 존재한다.( node.js에서는 `global`로 불린다. )

함수를 그냥 호출하는 경우에서의 this는 현재 함수를 실행하고 있는 객체를 바인딩한다.

위의 코드를 보면 user함수는 전역에서 정의되어 있다.

이때 전역에 정의된 모든 코드를 감싸는 최상위 객체가 있다면, user함수 처럼 전역에 선언된 일반 함수는 window객체의 내부 함수( 메서드 )라고 볼 수 있다.

즉, 모든 함수는 객체 내부에 있다고 말할 수 있다.

그래서 처음에 " this는 항상 어떠한 상위 객체를 바인딩한다 " 라고 언급했다.

따라서 일반 함수의 경우에는, 해당 함수를 실행하고 있는 window객체를 바인딩한다.

---

2. 생성자 함수로 호출할 때 : 인스턴스

#2

function User() {
	this.name = 'muzi';
	console.log(this); // User {name: 'muzi'}            
}
														
const user = new User();           
// new 연산자를 이용해서 
// 새로운 myfn 객체를 얻는다.		 
// this는 해당 myfn 객체를 바인딩한다
// myfn 객체에 title = 'Hello World!'
// 을 할당한다

user

this가 뭘 바인딩하는지 궁금하다면 현재 this가 들어있는 함수의 종류를 파악해라.