This | 디스

이번에는 this에 관해서 요점만 정리를 하겠습니다.

1. this는 실행 컨텍스트를 가리키는 것

실행 컨텍스트란?

간단히 말하자면 자바스크립트 코드 블록이 실행되는 환경을 뜻합니다.

실행 컨텍스트 안에는 arguments 객체, 스코프 , 변수, this 에 대한 정보가 담겨있습니다.

this는 함수 또는 함수의 렉시컬 스코프를 가리키는 것이 아닙니다.

2. this는 런타임 시점에 바인딩이 되며 호출부에 따라 결정

호출부란?

함수를 호출한 지점을 말합니다.

기본 바인딩

function foo() {
  console.log(this.a);
}
var a = 2;
foo(); // 2

기본적인 함수 호출에서 this는 전역 객체를 참조합니다.

엄격모드(strict mode)에서는 전역 객체가 기본 바인딩 대상에서 제외가 되기 때문에 this는 undefined가 됩니다.

암시적 바인딩

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
};
obj.foo(); // 2

호출부에 콘텍스트 객체가 있으면 this는 해당 객체를 가리킵니다.

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo;
var a = 3;
bar(); // 3

2가 나올 거 같지만 실제로는 3이 출력됩니다. 이유는 obj.foo를 bar에 대입할 때 레퍼런스 복사가 일어납니다.

bar는 foo를 가리키는 또 다른 레퍼런스입니다.

그리고 기본 함수 호출을 했기 때문에 this는 전역 객체를 가리킵니다.

명시적 바인딩

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2
};
foo.call(obj); // 2

this가 호출부에 따라서 달라지기 때문에 만약 this를 고정시켜야 한다면 call, apply, bind 메서드를 사용하면 this가 고정이 됩니다.

foo.call(obj)를 하면 this는 obj를 가리키게 됩니다.

new 바인딩

function foo(a) {
  this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2

함수 앞에 new를 붙여 호출을 하면 새 객체가 생성이 되고 그 객체에 this가 바인딩이 됩니다.

foo의 this는 bar 객체를 가리킵니다.

3. this는 전달되지 않는다.

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
};
foo(); // undefined
obj.foo(); // 2

foo함수를 기본 호출할때는 this가 전역 객체를 가리키지만 obj.foo를 호출하면 this는 obj를 가리킵니다.

그래서 this는 실행을 할때 정해지기 때문에 코드를 작성할 때의 this와 다를 수 있습니다.