javascript 자바스크립트 클래스 정의 방법, 클래스 활용, 자바스크립트 클래스

javascript 자바스크립트 클래스 정의 방법, 클래스 활용, 자바스크립트 클래스

 

Class키워드를 사용한 방법은 아래의 Link를 참고하세요!

 

Link : https://aljjabaegi.tistory.com/586

javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype

 

자바스크립트도 여타 다른 언어들과 같이 클래스를 정의하여 사용할 수 있습니다.

정확히 말하면 비슷하게 구현해 사용할 수 있는 것이죠. 클래스는 아닙니다.

 

그럼 자바스크립트에서 클래스처럼(?!) 구현하는 방법을 알아보도록 하겠습니다.

(하단부터는 클래스처럼 구현한 것을 그냥 클래스라 명명하겠습니다..)

 

기본적으로 클래스를 구현하기 위해선 1급 객체인 함수를 활용합니다.

 

const CarInfo =  function (data){ 
    this.carNum = data.carNum;
    this.driver = data.driver;
    this.fuel = data.fuel;
    this.dateOfPurchase = data.purchaseDate;
 
    .
    .
    .
} 

 

data라는 Object를 받아 함수의 this.변수명에 매핑합니다.

그리고 활용은 아래와 같이 new 생성자 함수를 사용하여 하죠. (생성자함수를 사용할 땐 대문사 사용)

 

const dataObj = {carNum : '34부3470',
    driver : '이건',
    fuel : 'Gasoline',
    purchaseDate : '20150911',
   .
   .
   .
}
 
var firstDriver = new CarInfo(data);

 

프로토타입을 사용하여 클래스의 메소드도 추가 할 수 있습니다.

(프로토타입에 대한 설명은 아래 Link를 참조)

 

Link : Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

const CarInfo =  function (data){
    this.carNum = data.carNum;
    this.driver = data.driver;
    this.fuel = data.fuel;
    this.dateOfPurchase = data.purchaseDate;
    .
    .
    .
} 
 
CarInfo.prototype.getInfo = function(){
    return '차량번호 : '+this.carNum+' 운전자 : '+this.driver;
}

 

클래스 내에서 메소드를 구현할 수도 있지만, 이는 클래스가 생성될 때마다 메소드가 생성되기 때문에 비효율 적입니다. 그래서 prototype을 활용하여 모든 CarInfo 객체에 getInfo 메소드를 상속받아 사용하는 방식을 추천합니다.

 

이처럼 자바스크립트는 보다 유연하게 클래스 처럼 활용 할 수 있습니다.