[Javascript] ES5의 프로토타입(prototype) / ES6+의 클래스(class)

 

 

ES5에서는 객체를 구현하기위해 prototype을 사용하고, ES6에서는 같은 개념인 class를 사용한다.

가독성도 좋고 쉽게 선언할 수 있는게 차이점인 듯!

 

 

 

---

 

 

 

◽ ES5: Prototype

프로토타입에서는 함수명.prototype.함수명 형태로 선언하여 객체 외부에서 객체내부에 선언된 함수를 사용할 수 있다.

// ES5의 프로토타입(Prototype)
let examCountFunction = (function () {
  function examCount(num) {
    this.number = num
  }

  examCount.prototype.showNum = function () {
    console.log(this.number);
  }
  return examCount;
}());

let cnt = new examCountFunction('100')
cnt.showNum()

 

 

◽ ES6: Class

ES5와 달리 class의 스코프 안에 간단하게 선언할 수 있다.

// ES6의 클래스(Class)
class examCountClass {
  constructor(num) {
    this.number = num
  }
  showNum() {
    console.log(this.number);
  }
}

let cnt = new examCountClass('100')
cnt.showNum()

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.