[ES6] 프로토타입 prototype에서 class 클래스로

2020.09.18 - [웹 프론트엔드/자바스크립트] - [ES6] 템플릿 문자열 (Template String)

 

---

프로토타입 prototype

 이번 포스팅은 ES6에 추가된 클래스에 대해 설명해보려 합니다. 하지만 기존 자바스크립트의 프로토타입을 알지 못하면 비교가 어려우니, 간단하게라도 기존 버전에서는 어떻게 클래스를 표현했는지 살펴보겠습니다. 내용은 사각형의 넓이를 구하고(x * y) 그다음에 확장(extends) 또는 상속하여 부피를 구하는(x * y * z) 식입니다.

 

// 생성자(constructor) 형태로 함수 선언
function Area(x, y) {
  this.name = "Area";
  this.set(x, y);
}

// static 객체 생성 함수
Area.create = function (x, y) {
  return new Area(x, y);
};

// 상속을 위해 프로토타입에 대입 함수 추가
Area.prototype.set = function (x, y) {
  this.x = x;
  this.y = y;
};

// 상속을 위해 프로토타입에 계산 함수 추가
Area.prototype.cal = function () {
  return this.x * this.y;
};

// 객체 생성 후, 계산 불러오기
var area = Area.create(5, 7);
console.log(`사각형의 넓이는 : ${area.cal()}`); // 35

// -----------------------------------------------------------

// 생성자(constructor) 형태로 함수 선언
function Volume(x, y, z) {
  Area.call(this, x, y); // 부모 생성자 호출 (this.set)
  this.name = "Volume";
  this.z = z;
}

// 부모(Area)로 부터 프로토타입을 물려(상속) 받음
Object.assign(Volume.prototype, Area.prototype);
// 또는 이런식으로도 가능
//Volume.prototype = Object.create(Area.prototype);
//Volume.prototype.constructor = Volume;

// 부피를 구하는 식으로 계산식 재정의
Volume.prototype.cal = function () {
  var temp = new Area(this.x, this.y);
  return temp.cal() * this.z;
};

// 객체 생성 후, 계산 불러오기
var volume = new Volume(5, 7, 10);
console.log(`사각형의 부피는 : ${volume.cal()}`); // 350

 

소스가 길어 보이지만 내용은 간단합니다. 먼저 넓이를 구하는 Area를 정의하고 기능을 추가합니다. 재사용할 함수들은 상속을 위해 프로토타입에 추가해 줍니다. 다음으로 부피를 구하는 Volume를 정의하고 재사용할 부분을 다시 정의합니다. 얼추 객체지향 언어의 클래스 기능과 비슷합니다. 이제 클래스 표현식으로 변신!

클래스 class

class Area {
  name = "Area";
  static create(x, y) {
    return new Area(x, y);
  }
  constructor(x, y) {
    this.set(x, y);
  }
  set(x, y) {
    this.x = x;
    this.y = y;
  }
  cal() {
    return this.x * this.y;
  }
}

var area = Area.create(5, 7);
console.log(`사각형의 넓이는 : ${area.cal()}`); // 35

// -----------------------------------------------------------

class Volume extends Area {
  constructor(x, y, z) {
    super(x, y);
    this.z = z;
  }
  cal() {
    return super.cal() * this.z;
  }
}

var volume = new Volume(5, 7, 10);
console.log(`사각형의 부피는 : ${volume.cal()}`); // 350

 

이번에는 직접 비교해 보시라고 주석으로 설명을 달지 않았습니다. 기존에 JAVA 같은 객체지향 언어를 아시는 분은 한눈에 쏘~옥 들어오실 거라 생각합니다. 기능 상으로는 프로토타입과 다르지 않지만, 알아보기도 쉽고 다른 언어들과의 이질감도 적습니다. 그리고 만약 여기서 더 확장이나 상속을 한다면 클래스 표현식은 더욱 강력한 기능이 될 것입니다.

 

오늘은 여기까지 입니다. 기존의 프로토타입을 잘 모르시는 분은 너무 신경 쓰지 마시고

ES6의 클래스 표현식에 더 집중해서 적극 활용해 보시는 게 좋을 것 같습니다.

 

이태원클래스 참 재밌죠?

 

---

2020.09.25 - [웹 프론트엔드/자바스크립트] - [ES6] 배열 함수 forEach , map , reduce

[ES6] 배열 함수 forEach , map , reduce