[Js] ES5 prototype vs ES6 Class

자바스크립트는 프로토타입 언어라도 불린다. 객체 지향을 베이스로한 다른 언어와 달리, 생성자 함수를 기반으로 프로토타입 체이닝을 통해 참조 변수및 원시 변수들을 모두 다룬다.

 

그러나 대규모 프로젝트에 OOP가 더 적합하다는 인식과 내부적으로 객체 지향 기능을 구현하고자하는 니즈로 ES5에서는 객체를 모방한 프로토타입을 사용한다. class와 구조가 비슷한듯 매우 안비슷하다.

 

1. prototype

프로토타입은 위 사진만으로 설명 가능하다. 생성자 함수(constructor)은 protptype을 가지고 있고, new를 통해 instance를 생성한다. instance는 _proto_를 가지고 있는데, _proto_는 prototype을 참조한다. prototype과 _proto_ 모두 메소드를 가질수 있으며, 초기화및 생성이 가능하다

*메서드 오버라이드, 프로토타입 체인, prototype이 객체, static method들은 다른 글을 참조

const ES5 = function (name) {
  this.name = name;
};

// static은 constructor에서만 접근 가능
ES5.staticMethod = function () {
  return this.name + " staticMethod";
};

ES5.prototype.method = function () {
  return this.name + " method";
};

const ES5Instance = new ES5("정운");
console.log(ES5Instance);
console.log(ES5Instance.name);
console.log(ES5Instance.method);
console.log(ES5Instance.staticMethod); //static method는 생성자 함수를 통해서만 접근 가능
console.log(ES5.staticMethod);

 

2. Class

 

class는 ES6에서만 사용 가능하다. OOP와 유사한 구조를 띄며, 프로토타입과 다르게 상속이 가능하다.

현실세계에서 실질 개체들이 있으면, 이들의 공통점을 찾아 상위 개념으로 집단화 할수가 있다. ex: 나-> 성별, 나라, 문화등으로 그룹화

하지만 프로그래밍에선 추상화 개념을 먼저 만든후, 구체적인 인스턴스 생성이 가능하다. 이때 추상화 개념은 상속을 통해 다중 상속 관계를 가질수 있고,  인스턴스는 추상화 개념의 속성들을 모두 지닌다. 여기서 추상화 개념을 class라 보면 된다.

*객체 지향은 다른 객체 사용시, 추상화 접근이 중요하다

 

const ES6 = class {
  constructor(name) {
    this.name = name;
  }

  static staticMethod() {
    return this.name + " staticMethod";
  }

  method() {
    return this.name + " method";
  }
};

const ES6Instance = new ES6("정운");
console.log(ES6Instance);
console.log(ES6Instance.name);
console.log(ES6Instance.method);
console.log(ES6Instance.staticMethod); //static method는 생성자 함수를 통해서만 접근 가능
console.log(ES6.staticMethod);

 

요약

es6부터 class 사용이 가능하다

개인적으로 prototype보단 class를 통한 개발이 더 선호된다

 

 

*코드 깨지면 아래 참조

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/js-es5-prototype-vs-es6-class-5ae9d5c64f6e