Javascript - class는 그저 prototype의 syntax sugar 일까?

김태수·2021년 8월 3일
0

기타

목록 보기
7/11

JS class

자바스크립트는 prototype기반 객체지향 언어로써, 다른 객체지향 언어와의 차이점에 대한 논쟁이 있지만 강력한 객체지향 프로그래밍 능력을 지니고 있다.
es5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통하여 객체지향 언어의
상속을 구현할 수 있다.

const Person = (function () {
  function Person(name) {
    this.name = name;
  }
  
  Person.prototype.sayHi = function () {
    console.log('Hi! My name is ' + this.name);
  };
  
  return Person;
}());

const me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

다만 클래스기반 언어에 익숙한 프로그래머들은 프로토타입 기반의 프로그래밍 방식에 혼란을 느낄 수 있다.
따라서 es6 이상의 class 키워드를 사용하여 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 흡사한
형태의 객체 생성 매커니즘이 구현 되었다. 그러나 자바스크립트가 기존의 프로토타입 기반 인스턴스 생성을 버리고 클래스 기반의 모델을 제공하는것은 아니며, 기존 프로토타입 기반 패턴을 가져가되 클래스 기반 패턴처럼 사용 할 수 있도록 하는 syntax sugar 라고 할 수 있다.

다만 둘은 정확히 동일하게 동작하지는 않으며, 클래스 생성자가 프로토타입 생성자 함수보다 엄격하며, 생성자 함수에서 지원하지 않는 기능도 제공한다.
클래스와 생성자함수간의 차이점은 대표적으로 다음과 같다.

- 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 그러나 생성자 함수는 new없이 일반 함수로써 호출할 수 있다.
- 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다.
- 클래스는 호이스팅이 발생하지 않는다. 하지만 함수 선언문으로 정의된 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
- 클래스 내의 모든 코드는 암묵적으로 strict mode가 지정되어 실행된다.
- 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. 열거되지 않는다.

생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 매우 유사하다. 하지만 클래스는 생성자 함수 기반의 객체 생성 방식보다 명료하다. 따라서 클래스를 프로토타입 기반의 생성 패턴의 단순한 문법적 설탕이라고 보기 보다는 새로운 객체 생성 메커니즘으로 보는것이 좀 더 합당하다.

prototype과 class의 차이

프로토타입 기반의 프로그래밍 언어인 자바스크립트에서 Class 키워드가 추가되었다고 해서 자바스크립트가 Class기반의 언어가 되었다는 것이 아니다. 프로토타입 기반은 클래스 기반의 구시대적 방법보다 강력한 시스템이 될 수 있다. 프로토타입 기반의 코드를 클래스 기반으로 바꾸는 것은 쉽지만, 반대의 경우는 거의 불가능에 가깝다.

Class는 설계도이다

Class 상속을 이용한 방법은 변경하기 어렵고 기반이 되는 클래스를 수정했을 때 하위 클래스들이 영향을 쉽게 받을 수 있는 계급 계층구조를 만든다.
Class의 정의에 인스턴스의 함수를 불러올 수 없다. 인스턴스를 먼저 생성한 후에 해당 함수를 불러올 수 있다.

Prototype은 오브젝트 인스턴스이다

Prototype 상속이 반드시 유사한 계층구조를 생성하지는 않는다. 프로토타입 체인을 최대한 간결하게 만드는 것이 중요하다.
위임형 상속을 사용하는 것은 말 그대로 다른 오브젝트와 연결된 오브젝트라고 할 수 있다. 프로토타입 객체는 다른 객체의 기반이 된다. 연결상속을 사용하면 새인스턴스로 속성을 복사함으로써 상속을 구현하는 방법이다.

Prototype

Javascript 안에서는 원시 데이터타입을 제외한 모든것이 객체이다. 객체를 생성하기 위해서는 자신을 만드는데 원형인 프로토타입 객체를 사용하여 객체를 만드는데, 이 때 만들어진 객체 안에는 __proto__속성이 있으며, 이는 자신을 만들어내는데 사용된 원형 프로토타입 객체를 참조하는 링크를 갖고 있다. 이 숨겨진 링크를 프로토타입이라 지칭한다.

profile
개발학습 일기

0개의 댓글