[모던 자바스크립트 딥다이브]_클래스 어디까지 보고 오셨어요?

클래스와 생성자 함수 비교

자바스크립트에서 어떤 객체를 만들 때 공장처럼 찍어낼 수 있다면 그건 바로 클래스 혹은 생성자 함수를 말하는 것입니다!

바로 정해진 틀을 준비하고 그 안에 값을 넣어주면 찍어내 듯 객체를 만드는 것인데요.

사실 굉장히 생소한 개념이라 어렵게 느껴질 수 있지만 공장에 있는 모형틀을 생각하면서 이해해 나가시면 되겠습니다.

그럼 바로 이전에 배웠었던 생성자 함수를 살펴보고 이어서 클래스도 살펴보겠습니다.

//생성자 함수
var Person = (function () {
  function Person(name) {
    this.name = name;
  }
  
  Person.prototype.sayHi = function () {
    console.log('Hi!' + this.name);
  };
  
  Person.sayHello = function () {
    console.log('Hello!');
  };
  
  return Person;
}());

var me = new Person('Lee');
me.sayHi(); // Hi! Lee

이 생성장 함수의 구조는 크게 세 가지로 나눌 수 있는데요.

프로퍼티를 생성하는 부분과, 프로토타입메서드를 생성하는 부분, 그리고 정적메서드가 있습니다.

//클래스
Class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`Hi! ${this.name}`);
  }
  
  static sayHello() {
    console.log('Hello!');
  }
}

const me = new Person('Lee');

console.log(me.name); //Lee

me.sayHi(); // Hi! Lee

Person.sayHello(); Hello!

클래스도 역시 프로퍼티 생성, 프로토타입 메서드 생성, 정적메소드 생성 부분으로 나눌 수 있습니다.

 

지나가면서 봐도 둘은 굉장히 유사하게 생겼는데요.

하지만 다른 점이 분명히 있습니다.

생성자 함수 //생성자 함수 function Person(name) {   this.name = name; }	<--->	클래스 // 생성자 constructor(name) {   this.name = name; }
//프로토타입 메서드 Person.prototype.sayHi = function () {   console.log('Hi!' + this.name); }	<--->	// 프로토타입 메서드 sayHi() {   console.log(`Hi! ${this.name}`); }
// 정적 메서드 Person.sayHello = function () {   console.log('Hello!'); }	<--->	//정적 메서드 static sayHello () {   console.log('Hello'); }

이 테이블을 보면 생성자 함수에서는 말 그대로 생성자 함수를 사용해서 프로퍼티를 만든다면,

클래스에서는 constructor 메서드를 사용해서 프로퍼티를 만듭니다.

그리고 프로토타입 메서드를 생성하는 부분에서는 키워드를 사용하는 유무에서 차이가 나고 있습니다.

정적 메서드에서는 특이하게 클래스에서 static이라는 키워드를 사용해 정적 메서드를 만듭니다.

 

---

 

프로토타입메서드와 정적메서드의 차이

우선 프로토타입메서드란 무엇일까요?

이전에 배웠던 프로토타입체인을 떠올리시면 됩니다.

오브젝트에 프로토타입 메서드를 생성하여 이 클래스에서 생성한 인스턴스는 접근할 수 있게 되는건데요.

정적 메서드는 여기서 차이가 납니다.

정적메서드는 클래스로 호출을 하게 되고, 메서드는 인스턴스로 호출을 하게 되는데요.

따라서 정적메서드는 인스턴스 프로퍼티를 참조할 수 없고,

그 반대로 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수가 있습니다.

 

---

 

this 바인딩 

this라는 단어가 나올 때마다 느끼는 것은 아마 헷갈림일 거 같습니다.

간단하게 클래스에서의 this는 앞으로 생성될 인스턴스를 지칭한다고 생각하시면 됩니다.

따라서,

< 프로토타입 메서드 >
sayHi() {
  console.log(`Hi! ${this.name}`);
}

를 보면 앞으로 생성될 인스턴스의 name에 바인딩되려는 것을 볼 수 있습니다.

 

---

 

상속

앞에서 설명 드렸던 것처럼 클래스는 마치 공장에서 물건을 찍어내는 틀과 같아서

어떤 추가적인 요구사항을 가져다가 추가할 수가 있는데요.

이를 '상속'한다, 상속받는다라고 합니다.

보통 이전에 사용했던 클래의의 프로퍼티를 가져다 사용할 때 굳이 또 번거롭게 코드를 작성하지 않고

extends라는 키워드만 붙이면 됩니다.

//수퍼 (베이스/ 부모) 클래스
class Base {}

//서브 (파생/ 자식) 클래스
class Derived extends Base {}

그럼 간단히 Base의 프로퍼티를 상속받아 사용할 수 있게 됩니다.

 

---

 

super키워드

super라는 키워드는 부모 클래스의 생성자를 호출하거나 부모 클래스의 메서드를 호출 할 때 사용되는데요.

주로 하위 클래스내에서 부모 클래스의 동작을 확장하거나 재사용할 때 유용합니다.

그럼 차례대로 부모 클래스의 생성자 호출과 부모 클래스의 메서드 호출을 살펴보겠습니다.

1. 부모 클래스의 생성자 호출

class 부모클래스 {
  constructor(매개변수) {
    // 부모 클래스의 초기화 코드
  }
}

class 자식클래스 extends 부모클래스 {
  constructor(매개변수1, 매개변수2) {
    super(매개변수1); // 부모 클래스의 생성자 호출
    // 자식 클래스의 초기화 코드
  }
}

위 코드에서 자식 클래스는 부모 클래스의 초기화 로직을 통해서 상속하고 확장 할 수 있습니다.

 

  2.  부모 클래스의 메서드 호출

class 부모클래스 {
  부모메서드() {
    // 부모 클래스의 메서드 동작
  }
}

class 자식클래스 extends 부모클래스 {
  자식메서드() {
    super.부모메서드(); // 부모 클래스의 메서드 호출
    // 자식 클래스의 메서드 동작
  }
}

위 코드도 역시 부모 클래스의 메서드를 확장하거나 오버라이드 할 수 있습니다.