[TIL] JavaScript - This

This란?

다른 객체지향 언어에서는 this는 곳 클래스로 생성한 인스턴스를 말합니다. 하지만 JavaScript에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 this는 어디에서나 사용될 수 있습니다. 대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정됩니다. 실행하는 동안의 할당에 의해 설정될 수 없고, 함수가 호출될 때마다 다를 수 있습니다. 

 

this의 이해

this가 어떤 값과 연결되는 지는 this의 바인딩을 통해서 확인해 볼 수 있습니다. 바인딩이란, this의 호출 방식에 따라서 this가 특정 '객체'에 연결되는 것입니다. this의 바인딩은 일반 함수 내부, 메서드 내부, 생성자 함수 내부, Call, Apply, Bind를 통한 '호출 방식'으로 나눠서 살펴볼 수 있습니다.

1. 일반 함수 내부에서의 this는 글로벌 객체와 바인딩됩니다.
2. 메서드 내부에서의 this는 메서드를 호출한 객체와 바인딩됩니다.
3. 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩됩니다.
4. Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩됩니다.

 

상황에 따라 달라지는 this

1. this는 실행 컨텍스트가 생성될 때 결정됩니다( this binding ). 즉, this는 함수를 호출할 때 결정되는 것과 같습니다.

1. 전역 공간에서 this는 전역 객체를 가리킵니다.
2. window(브라우저 환경), global(node 환경)

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

 

2. 메서드로서 호출할 때 그 메서드 내부에서의 this

• 함수 vs 메서드
  1. 기준 : 독립성
  2. 함수 : 그 자체로 독립적인 기능을 수행합니다.
  3. 메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행합니다.
• 함수와 메서드가 호출될 때, this는 각각 다르게 할당됩니다.

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

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

• 함수로서의 호출과 메서드로서의 호출 구분 기준은 ' . ' 과 [ ] 입니다.

var obj = {
  method: function (x) { console.log(this, x) }
};

obj.method(1); // { method: f } 1
obj['method'](2); // { method: f } 2

• 메서드 내부에서의 this

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

obj.methodA(); // this === obj
obj['methodA'](); // this === obj

obj.inner.methodB(); // this === obj.inner
obj.inner['methodB'](); // this === obj.inner
obj['inner'].methodB(); // this === obj.inner
obj['inner']['methodB'](); // this === obj.inner

 

3. 함수로서 호출할 때 그 함수 내부에서의 this

• 함수 내부에서의 this
  1. 어떤 함수를 함수로서 호출할 경우, this는 호출의 주체가 없으므로 지정되지 않습니다.
  2. 실행컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this는 전역 객체를 바라봅니다.
  3. 따라서, 함수로서 '독립적으로' 호출할 때는 this는 전역 객체입니다.
• 메서드의 내부함수에서의 this
  1. 메서드의 내부라고 해도, 함수로서 호출한다면 this는 전역 객체입니다.
  2. this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경 ( 메서드 내부인지, 함수 내부인지 )은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에서 ' . ' (점) 또는 [ ] (대괄호) 표기가 있는지가 관건입니다.

var obj1 = {
  outer: function() {
    console.log(this);
    var innerFunc = function() {
      console.log(this);
    }
    innerFunc();
    
    var obj2 = {
      innerMethod: innerFunc
    };
    obj2.innerMethod();
  }
};
obj1.outer();

 

마치며...

요즘 뭔가 집중이 안 되는 것 같은데... 그래도 오늘 하고자 하는 것들은 다 한 것 같다!!

이번 주 조금 고비지만 견뎌내 보자!!