TIL5 - 객체 지향 2

(아래 글은 2022.02.18에 학습한 내용을 정리한 글입니다.)

오늘 배운 것은 전역객체와 this의 사용법에 대한 내용이다.

No.1 - 전역객체

전역객체는 window라는 이름을 가진 객체로, 자바스크립트 안에서 모든 객체는 기본적으로 이 전역객체 내의 객체가 된다. 전역객체는 기본적으로 모든 코드에 적용이 되기 때문에, 코드를 작성할 때 굳이 전역객체를 붙일 필요는 없다.
하지만, 아래와 같이 전역객체를 사용하여 함수를 호출하더라도 일반적으로 함수를 호출할 때와 동일하게 실행되는 것을 알 수 있다.

function a(){
	console.log("Hello?");
}
window.a();
  
let hi = {
	b: function() {
		console.log("Hi");
	},
}
window.hi.b();

No.2 - this

this는 자기 자신을 가리키는 상황에 따라 가리키는 대상이 달라지는데, 이는 함수를 어떻게 호출하느냐가 기준이 된다. 함수와 객체 사이의 느슨한 관계를 this가 연결키는 역할을 해주는 것이다.
기본적으로, this는 전역객체인 window와 같다.

  function func()
      if(window === this) {
          console.log("window is this.");
      }
  func();

• 객체에 소속된 메소드의 this는 그 객체를 가리킨다.

  let hi = {
      a: function() {
          if(hi === this)
              console.log("hi === this");
      },
  }
  hi.a();

함수가 생성자로 호출될 때 this가 포함될 경우 this는 그 생성자가 만든 객체를 가리키게 된다.

  let funcThis = null;
  
  function Func() {
      funcThis = this;
  }
  
  let a1 = func();
  if(funcThis === window) {
      console.log("window");
  }
  
  let a2 = new func();
  if(funcThis === o2) {
      console.log("a2");
  }

이때, 생성자로 생성되는 객체는 함수의 호출이 끝난 후에 할당되기 때문에, 아래와 같은 방식으로 함수에 if문을 기입하여 this가 객체를 가리키는지 판단할 경우 객체에 접근할 수 없어서 오류가 발생하게 된다.

  function Func() {
      if(a2 === this) {
          console.log("o2")
      }
  }
  let a2 = new func();
  a2();

• switch문은 if문의 대체제이다. apply를 통해 함수를 불러올 때 적용시킬 case를 지정할 수 있다. 단, case 내의 코드가 한 번 작동하기 시작하면 break를 만나기 전까지 자신 아래에 있는 case의 코드까지 실행하게 된다. 전역객체는 함수를 불러올 때 apply를 사용하지 않아도 적용된다.

let o = {}
let p = {}
function func() {
	switch(this) {
		case o:
			console.log("o");
			break;
		case p:
			console.log("p");
			break;
		case window:
			console.log("window");
			break;
	}
}
func();
func.apply(o);
func.apply(p);