<aside> 💡 자바스크립트는 클래스가 없음 자바스크립트는 프로토타입 기반의 언어임

</aside>

<aside> 💡 es6에 클래스가 추가되었지만 그것은 문법적인 설탕이었음

실제 동작은 프로토타입 기반으로 동작하지만 겉으로 보기에는 클래스로 동작하는 것처럼 작성하게 함 기존의 문법을 활용해서 편의성이나 기능을 더한 문법을 설탕 문법(syntactic sugar)라고 함

</aside>

기존 방식

function Shape(color) {
  this.color = color;
  this.getColor = function () {
    return this.color;
  };
}

const shape1 = new Shape("red");
console.log(shape1.color);
console.log(shape1.getColor());

function Retangle(color, width, height) {
  this.color = color;
  this.width = width;
  this.height = height;
  this.getColor = function () {
    return this.color;
  };
  this.getArea = function () {
    return this.width * this.height;
  };
}

const rect1 = new Retangle("blue", 10, 10);
console.log(rect1);

Shape의 color와 getColor 속성을 상속받아서 쓰고 싶음

상속 방법

function Shape(color) {
  this.color = color;
  this.getColor = function () {
    return this.color;
  };
}

function Retangle(color, width, height) {
  Shape.call(this, color); // 상속
  this.width = width;
  this.height = height;
  this.getArea = function () {
    return this.width * this.height;
  };
}

const rect1 = new Retangle("blue", 10, 10);
console.log(rect1);
console.log(rect1.color);

클래스 사용

class Shape {
  constructor(color) {
    this.color = color;
  }

  getColor() { // this 없이 선언 가능
    return `이 도형의 색상은 ${this.color}입니다.` 
  }
}

const shape1 = new Shape("red"); // 인스턴스 생성

기존의 방식과 차이점

• 기존 방식은 정의한 속성과 메서드가 모두 인스턴스 내부에 존재
  • 프로토타입으로 등록하기 위해서는 추가 작업 필요
• 클래스를 사용하면 속성만 내부에 존재하고 메서드는 자동으로 프로토타입 객체로 등록됨
  • 자동으로 인스턴스 메모리 최적화 진행됨
  • 메모리 성능 향상을 신경쓰지 않고 인스턴스 생성 가능

상속

class Shape {
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return `이 도형의 색상은 ${this.color}입니다.`;
  }
}

class Retangle extends Shape{ // 상속
  constructor(color, width, height){
    super(color);
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const rect1 = new Retangle("blue", 10, 10);
console.log(rect1.getColor());
console.log(rect1.getArea());

더 직관적이고 깔끔하게 상속을 구현할 수 있음