모던 자바스크립트 Deep Dive - 25장

클래스 

---

ES6에서부터 도입된 것은 정말 많다.. 클래스 또한 이때 도입이 되었다고 하는데, 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 다른 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 빠르게 학습할 수 있도록 매우 흡사하게 새로운 객체 생성 메커니즘을 제시한 것인데, 자스의 클래스는 함수이며, 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 할 수 있다. 

 

syntax sugar ( 문법적 설탕 ) 이란 ? 

syntactic sugar is syntax within a  programming language that is designed to make things easier to read or to express.

한 프로그래밍 언어안에서 읽고 표현을 더욱 쉽게 할 수 있도록 설계된 문법을 뜻합니다.

https://en.wikipedia.org/wiki/Syntactic_sugar

Syntactic sugar - Wikipedia

 

그러면 클래스랑 생성자 함수 차이점은 무엇이 있을까 ? 

 

1. 클래스를 new 연산자 없이 호출하면 에러가 발생하지만, 생성자같은 경우는 방어코드가 없으면 일반함수로써 호출이 되어버린다.

2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 알다시피 생성자 함수는 어림도 없다.

3. 클래스는 호이스팅이 되지만 발생하지 않는 것처럼 동작하고, 생성자 함수는 표현식으로 정의하면 변수 호이스팅 발생된다. 

4. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 실행되며, 해제할 수 없다. 생성자 함수는 어림도 없다.

5. 클래스는 constructor, 프로토타입 메소드, 정적메소드 모두 [[Enumerable]]의 값이 false다. 열거가 안됨

 

---

클래스 메서드 구성

 

1. constructor 

인스턴스를 생성하고 초기화하기 위한 특수한 메소드다.  constructor는 클래스 내에 한개만 존재할 수 있으며, 프로토타입의 constructor와 직접적인 관계는 없다. 클래스로 인스턴스를 생성할 때 프로퍼티의 초기값을 전달하고 싶다면, contructor에 매개변수를 선언하고, 인스턴스를 생성할 대 초기값을 전달한다. 즉, 인스턴스를 초기화하려면 필수다. 

 

2. 프로포타입 메소드 

클래스는 생성자 함수와는 다르게, prototype을 명시해주면서 까지 정의할 필요없고, 메소드 축약식으로 추가해주면 자동으로 프로포타입 메소드가 된다. 이렇게 프로토타입 메소드가 되면, 인스턴스에도 동일하게 적용되며, 결국 클래스도 생성자 함수와 마찬가지로 프로토타입 기반의 객체 생성 메커니즘인것이다. 

 

3. 정적 메소드 

정적 메소드란 인스턴스를 생성하지 않아도 호출할 수 있는 메소드를 말한다. 정적 메소드는 클래스에 바인딩된 메소드가 된다. 정적 메소드가 바인딩된 클래스는 프로토타입 체인상에 존재하지 않기 때문에 인스턴스로 호출할 수 없다. 즉 상속을 받을수 없다. 

 

클래스와 생성자 함수 작성 차이

---

정적 메소드와 프로토타입 차이점 

 

1. 정적 메소드와 프로토타입 메소드는 자신이 속해 있는 프로토타입 체인이 다르다.
2. 정적 메소드는 클래스로 호출하고 프로토타입 메소드는 인스턴스로 호출한다.
3. 정적 메소드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메소드는 인스턴스 프로퍼티를 참조할 수 있다. 

 

정적 메소드는 클래스로 호출해야 하므로 정적 메소드 내부의 this는 인스턴스가 아닌 클래스를 가르킨다. 프로토타입 메소드와 정적 메소드 내부의 this 바인딩이 다르다. 메소드 내부에서 인스턴스 프로퍼티를 참조할 필요가 있다면 this를 사용해야하며, 이런한 경우는 프로토타입 메소드로 정의해야 한다. 하지만 메소드 내부에서 인스턴스를 참조할 필요가 없다면, this를 사용하지 않게 된다. 

 

이런 정적 메소드를 어디에 쓸까 싶은데, 우리가 자주쓰는 정적 메소드들이 있다.

정적 메소드의 예

그렇다, 이렇게 하나의 네임스페이스로 사용하여 정적 메소드를 모아 놓으면 이름 충돌 가능성도 줄여주고 구조화할 수 있는 효과가 있다. 

 

---

상속에 의한 클래스 확장

프로토타입 기반 상속, 클래스 상속 둘이 비슷해보이는 개념이지만 좀 다르다. 일단 프로토타입 기반 상속같은 경우는 프로토타입의 체인을 통해 다른 객체의 자산을 상속을 받는 개념이라면, 클래스 상속은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것라고 볼 수 있다. 이게 말로는 이해가 되지않는다. 

 

 

 

 

Animal 클래스의 속성을 그대로 사용하면서 자신만의 고유한 속성만 추가하여 확장 할 수 있다. 코드 재사용적 측면에서 굉장히 좋다. 클래스는 상속을 통해 다른 클래스를 확장할 수 있는 문법인 extends 키워드가 기본적으로 제공되는데, extends 키워드를 사용한 클래스 확장은 간편하고 직관적이다. 하지만 생성자 함수는 클래스와 같이 상속을 통해 다른 생성자 함수를 확장할 수 있는 문법이 제공되지 않다. 

 

 

 

 

 

 

 

 

extends 키워드 

 

상속을 통해 확장된 클래스를 서브클래스라 부른다.

서브클래스에게 상속된 클래스를 수퍼클래스라고 부른다. 

 

 

 

 

super 키워드 

super 키워드는 함수처럼 호출할 수도 있고 this와 같이 식별자처럼 참조할 수 있는 특수한 키워드이다.
super를 호출하면 수퍼클래스의 constructor(super-constructor)를 호출한다.

 

 

 

수퍼클래스에서 추가한 프로퍼티와 서브클래스에서 추가한 프로퍼티를 갖는 인스턴스를 생성한다면 서브클래스의 constructor를 생략할 수 없다. 이때 수퍼클래스의 constructor에 전달할 인수는 서브클래스에서 호출하는 super를 통해 전달한다. 

 

 

 

 

 

주의점

1. constructor에서는 반드시 super를 호출해야 한다. 
2. 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.
3. 서브클래스가 아닌 클래스 혹은 함수에서 super를 호출하면 에러가 발생한다. 

 

super 참조

메소드 내에서 super를 참조하면 수퍼클래스의 메소드를 호출할 수 있다.