2. 자바스크립트: 클래스

이 글은 이옹모님의 모던 자바스크립트 DEEP DIVE 교재를 참조하여 작성하였습니다.

 

목차

1.  

1. 개요

프로토타입 기반의 객체지향 언어는 클래스가 필요없는 객체지향 프로그래밍 언어이다.

ES5에서는 클래스 없이 아래 코드와 같이 생성자 함수와 프로토타입을 통해 객체의 상속을 구현할 수 있다.  

// ES5 생성자 함수
var Person = (function () {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function () {
    console.log('Hi! My name is ' + this.name);
  };

  // 생성자 함수 반환
  return Person;
}());

// 인스턴스 생성
var me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

ES6에서 도입된 자바스크립트의 클래스는 기존의 자바, C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한(나와 같은..) 프로그래머가 더욱 쉽게 상속에 대해 학습할 수 있게 해준다. 

클래스 기반의 객체지향 프로그래밍 언어와 매우 비슷하며, 새로운 객체 생성 메커니즘을 제시한다. 

 

사실 JS의 클래스는 함수이다. 기존의 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 "문법적 설탕"이라고 볼 수 있다. 

클래스와 생성자 함수 모두 프로토타입 기반의 인스턴르를 생성하지만 이 둘은 정확히 동일하게 동작하지는 않는다. 

클래스는 생성자 함수보다 더 엄격하며 생성자 함수에서 제공하지 않는 기능도 제공한다. 아래는 그것을 정리한것이다. 

1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로 동작한다. 
2. 클래스는 상속을 지원하는 extends 키워드와 super 키워드를 제공한다. (자바와 흡사..) 생성자 함수는 이를 지원하지 않는다. 
3. 클래스는 호이스팅이 발생하지 않는것 처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이 발생하며 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다. 
4. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 있고 실행되며 이를 해제할 수 없다. 하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다. 
5. 클래스의 contructor, 프로토타입 메소드, 정적 메소드는 모두 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false이다. 즉 열거 되지 않는다. 

 

2. 클래스의 정의

프로토타입 기반의 객체지향 언어는 클래스가 필요없는 객체지향 프로그래밍 언어이다.

ES5에서는