TIL14-03 자바스크립트 this

1. this?

• 자바스크립트에서 this는 '누가 나를 불렀느냐'를 뜻한다.
  즉, 선언이 아닌 호출에 따라 달라진다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다.

2. 전역공간에서의 this

• 전역공간에서의 this는 전역객체를 가리킨다.
• 브라우저 환경에서 전역객체는 window이고, Node.js 환경에서의 전역객체는 global이다.

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

3. 함수 vs 매서드

• 함수는 독립적인 기능을수행, 메서드는 호출한 대상 객체에 관한 동작을 수행하므로 함수 내부의 this는 지정되지 않을 때, 전역객체를 바라본다. 메서드는 호출한 대상의 객체가 있기 때문에 this가 호출한 대상의 객체를 바라본다. 하지만 메서드 내부라고 해도, 함수로서 호출한다면 this는 전역객체를 바라본다.

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

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

4. 콜백 함수 호출 시 내부에서의 this

• 콜백 함수 호출시 그 함수 내부에서의 this에서는 콜백함수도 기본적으로 함수이기 때문에, 특별히 this를 지정하지 않으면 전역객체를 바라보고 지정한 객체가 있으면 점 앞의 엘리먼트와, 이벤트 객체가 출력된다.

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

• 생성자 함수 내부에서의 this에서 생성자 함수란 어던 공통된 성질을 지니는 객체들을 생성하는데 사용되는 함수이며 생성자를 클래스(class), 클래스를 통해 만든 객체를 인스턴스(instance)라고 한다. 생성자 함수 내부에서의 this는 새로 만들 구체적인 인스턴스 자신이 된다

6. this 바인딩

• 자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법이다.