JavaScript에서 ES5 (ECMAScript 5)와 ES6 (ECMAScript 2015) 사이에는 클래스를 다루는 방식에서 주요 차이점이 있습니다. 

ES5에서는 클래스를 명시적으로 지원하지 않으며, 함수와 프로토타입을 사용하여 유사하게 구현한다. 

반면에 ES6에서는 클래스를 명시적으로 지원하며, 보다 선언적이고 직관적인 방식으로 클래스를 구성할 수 있습니다.

ES5에서 "클래스"는 함수를 사용하여 생성자로 정의됩니다. 

인스턴스 메소드는 생성자의 프로토타입 객체에 추가됩니다. 다음은 ES5 스타일로 작성된 간단한 Person 클래스의 예시이다.

Person.prototype.introduce = function() {

    return "My name is " + this.name + " and I am " + this.age + " years old.";

console.log(person1.introduce());  // 출력: My name is John and I am 30 years old.

ES6의 클래스도 내부적으로는 프로토타입 체이닝을 사용하여 구현되며, ES6의 클래스 예약어는 

기존의 프로토타입 기반 메커니즘을 보다 쉽고 명확하게 사용할 수 있도록 하는 개발자를 위한 "문법적 설탕(syntactic sugar)"이라고 볼 수 있다.

ES6에서는 class 키워드를 도입하여 클래스를 더욱 명확하게 정의할 수 있다. 

예약어를 통해서 클래스 메소드와 생성자 메소드는 클래스 선언 내부에 직접 정의되며. 이는 구문이 더욱 깔끔하고 이해하기 쉬워진다. 

위의 Person 클래스를 ES6 스타일로 재작성한 예는 다음과 같다.

        return `My name is ${this.name} and I am ${this.age} years old.`;

다음은 프로토 타입 체이닝을 통해, 상위 객체를 참조하는 __proto__ 값에 접근하는 예제이다.

        console.log(`${this.name} makes a noise.`);

이 경우, Animal 클래스의 모든 인스턴스는 Animal.prototype을 통해 speak메소드에 접근할 수 있다.

인스턴스는 이 프로토타입을 참조하며, speak같은 메소드는 이 프로토타입 객체에 저장되어 있습니다.

즉, 자바스크립트는 생성된 인스턴스에서 값을 찾을수 없다면, 프로토 타입을 통한 체이닝을 통해 상위 객체에서 값을 찾는 과정을 반복한다.

ES6의 클래스 문법은 프로그래머에게 보다 선언적이고 이해하기 쉬운 방식을 제공하지만, 엔진의 내부 동작은 전통적인 프로토타입 기반 방식을 그대로 사용한다.

이는 클래스 기반 언어(예: Java나 C#)와는 다소 차이가 있는데, 그러한 언어들은 보통 클래스와 객체의 관계를 다룰 때 내부적으로 다른 메커니즘을 사용한다고 한다.

프로토타입 체이닝을 통해 상위 객체의 참조 값을 찾는 과정은 마치 '강제 상속'과도 비슷한 측면이 있다고 생각한다. 

(이는 개인적일 생각일뿐이다.)

결론적으로, JavaScript의 클래스는 엔진 자체가 새로운 방식을 사용하는 것이 아니라, 프로토타입을 기반으로 하는 기존의 방식을 더욱 사용하기 쉽게 만드는 문법적인 형태이다.

클래스의 동작원리 (1)

Body Parser란?