this

---

this

함수 내에서 함수 호출 맥락을 의미한다. 맥락은 상황에 따라서 달라지는 것으로 예를 들어 어떤 함수를 호출할 때 어떻게 하느냐에 따라서 this가 가리키는 대상이 달라지게 된다.

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

함수호출

• 전역 객체

  function Func() {
    if (window === this) {
      document.write("window === this");
    }
  }
  Func();
  //  window === this
  

  함수를 호출하면 결과가 출력이된다. 즉 조건문 내용대로 this는 전역객체인 window가 되어서 텍스트가 출력된다는걸 알 수 있다.

• 메서드 호출

  var o = {
    Func : function() {
      if (o === this) {
        document.write("o === this");
      }
    }
  }
  o.Func();
  

  객체의 메서드에 접근하여 호출하게 되면 this는 객체 o가 되어 결과가 출력된다.

• 생성자

  var funcThis = null;
  
  // 함수호출은 
  function Func() {
    funcThis = this;
  }
  
  var o1 = Func();
  if (funcThis === window) {
    document.write('window </br>');
  }
  
  var o2 = new Func();
  if (funcThis === o2) {
    document.write('o2 </br>');
  }
  
  // 결과
  // window
  // o2
  

  위 결과를 보면 Func()를 저장한 경우는 this의 대상이 o1이 아닌 전역 객체인 window이다.

  객체를 바꾸기 위해서는 생성자를 통해 새로 객체를 만들어야 하며 o2는 생성자를 통해서 할당된 객체로 this가 o2로 바뀌어 결과가 출력되는걸 확인할 수 있다.

apply, call

함수는 apply와 call을 통해 this값을 제어할 수 있다.

• apply

  // 함수리터럴, 함수 객체를 만든다.  
  function sum(x, y) {return x+y;}
  sum(1, 2);
  // 3
  
  // 객체리터럴, 객체를 생성함, new ~
  var sum2 = new Function('x', 'y', 'return x+y;');
  

var o = {}
var p = {}
function func() {
  switch(this) {
    case o:
      document.wirte('o<br />');
      break;
    case p:
      document.wirte('p<br />');
      break;
    case window:
      document.witre('window<br />');
  }
}
func();
// this는 전역객체가 되므로 case window를 실행한다.
func().apply(o);
// 표준메서드로 접근을하면 인자로 받은 o를 대입하게 된다. this = o, case o 실행
func().apply(p);
// this = p, p를 실행

위 코드를 통해서 자바스크립트의 유연함을 알 수 있다.

기존의 언어에서는 객체-주인(master)에 메서드-노예(slave)가 종속되는 주종관계였다면 자바스크립트에서는 어디서 호출하는가에 따라서 속하는 곳이 바뀌게 되는 현대의 갑을 관계와 비슷하다고 볼 수 있다.