JavaScript - 클래스

객체지향이라는 이념은 프로그래밍 언어에서 두 가지 방법으로 구분이 된다. 하나는 이전에 배웠던 '프로토타입 기반 객체지향 언어' 이고 다른 하나는 '클래스 기반 객체지향 언어' 이다.

클래스 기반 객체지향 언어	프로토타입 기반 객체지향 언어
C++	자바스크립트
자바	루아(Lua)
C#
파이썬
루비
Objective-C
Swift

자바스크립트는 프로토타입 기반 객체지향 언어지만 ECMAScript 6 버전부터 클래스 기반 객체지향 언어처럼 사용이 가능하다. 클래스를 선언할 때는 class를 이용해 선언을 하고 내부에 생성자 함수를 넣는다. 생성자 함수와 마찬가지로 this 키워드를 선언한다.

클래스 기반 언어, 클래스 선언	일반적인 생성자 함수 선언
class Rectangle{      constructor(width, height){           this.width=width;            this.height=height;      } } const rectangle=new Rectangle(100, 200);	function Rectangle(width, height){      this.width=width;      this.height=height; } let rectangle = new Rectangle(100, 200);

메서드는 프로토타입 처럼 함수 밖에서 프로토타입으로 선언하는 방식이 아니라 class 블록 내부에 선언을 하는 차이점이 있다.

클래스 기반 언어, 메서드 선언	프로토타입 기반 언어, 메서드 선언
class Rectangle{      constructor(width, height){           this.width=width;            this.height=height;      }      getArea() {           return this.width*this.height;      } }         const rectangle=new Rectangle(100, 200); alert(rectangle.getArea());	function Rectangle(width, height){      this.width=width;      this.height=height; } Rectangle.prototype.getArea() {      return this.width*this.height; } let rectangle = new Rectangle(100, 200); alert(rectangle.getArea());

클래스를 이용한 생성자 함수 작성 예시

class Game{
      constructor(titel, type, language, price){
          this.제목=titel;
          this.장르=type;
          this.언어=language;
          this.가격=price;
      }
      addtax(){
          return this.가격+this.가격*0.1;
      }
      viewall(){
          return this.제목+' \t'+this.장르+' \t'+this.언어+' \t'+this.addtax()+'\n';
      }
}
 
let games=[];
games.push(new Game('Call of Duty', 'FPS', 'Korean', 110000));
games.push(new Game('Rainbow Six', 'FPS', 'Korean', 55000));
games.push(new Game('Starcraft 2', 'RTS', 'Korean', 33000));
games.push(new Game('Super Mario', 'RPG', 'Korean', 78000));
games.push(new Game('Assasins Creed', 'RPG', 'Korean', 65000));
games.push(new Game('Ghost Recon', 'RPG', 'Korean', 120000));
 
let summery='제목\t\t\t장르\t언어\t가격\n';
for(let i in games){
      summery+=games[i].viewall();
}
console.log(summery);

클래스.html

0.00MB