JS 27 this

17 Apr 2022

This

demo30.html

this는 함수 내에서 호출 맥락(context)를 의미함
맥락이라는 것은 상황에 따라서 달라진다는 의미인데
함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이
달라진다는 뜻

함수와 객체의 관계가 느슨한 JS에서는
this가 이 둘을 연결시키는 실질적인 연결점 역할을 함

함수호출

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

func();
// window === this

//여기서
//this는 global object인 window를 의미함

//어느 객체에 소속되어 있지 않기 때문에
//암시적으로 전역객체에 속해있는 함수이기떄문에
// this가 window에 접근함

// func(); === window.func();

method의 호출

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

o.func();
//o === this

//자기 자신을 this로 접근할 수 있음

construcor의 호출

var funcThis = null;

function Func() {
  funcThis = this;
}

var o1 = Func();
if (funcThis === window) {
  document.write("window <br />");
}
//window

var o2 = new Func();
if (funcThis === o2) {
  document.write("o2 <br />");
}
//o2
//new를 사용해서 o2라는 객체를 생성했기 때문

• 근데 어디서 호출?
  쌓여있지 않고 코드들이 다 나와있기때문에
  if문이 즉성에서 실행되었다 라는 개념인듯
  

  만약 내가 알고 있는 형태로
  호출하려면 아래와 같이 쌓으면 됨
  
  var funcThis = null;
  
  function Func() {
    funcThis = this;
  }
  
  function func() {
      var o1 = Func(); {
          if (funcThis === window) {
              document.write("window <br />");
          }
      }
      var o2 = new Func();{
          if (funcThis === o2) {
              document.write("o2 <br />");
          }
      }
  }
  func();
  // window
  // o2
  

constructor가 실행되기 전까지는
객체는 변수에 할당 될수도 없기 때문에
this가 아니면 객체에 대한 어떠한 작업을 할수 없음

function Func() {
  document.write(o);
}

var o = new Func();
//undefined

Apply, Call

함수는 객체

function sum(x, y) {
  return x + y;
}
sum(1, 2);
//: 3

var sum2 = new function('x','y','return x+y;');
sum2(1,2);
//: 3

//위의 두 예제는 완벽하게 동일한 코드

function literal

( )

object literal / new object

{ }

new lrteral

[ ]

apply로 호출하면

• swhich문?
  같은 case안에 들어있는 구간이 break를 만날 때 까지 실행됨
  break가 없으면?
  그 다음 case도 계속 실행됨 break를 만날 때 까지
  
  • if / switch
  • for / while

var o = {};
var p = {};

function func() {
  switch (this) {
    case o:
      document.write("o<br />");
      break;
    case p:
      document.write("p<br />");
      break;
    case window:
      document.write("window<br />");
      break;
  }
}

func();
//: window

func.apply(o);
//: o
//this가 argument o를 넣어서  o에 접근

func.apply(p);
//: p

일반적인 객체지향에서?
객체 - master / method - slave
method는 객체에 강하게 고정, 소속되어 있음

JS에서는?
맥락에 따라 관계가 유연
window / o / p 다양한 객체의 method로써 apply가 작동함

this
굉장히 유연해서 혼란스러울 수 있지만
관통하는 본질이 분명하게 존재함
소속된 객체를 파악함으로써 원리를 알 수 있을 것