본문 바로가기
Javascript

Javascript - 클래스(Class)

by DGK 2021. 10. 1.

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

클래스(Class)

 

  • Class 란?
Class는 특정 객체를 생성하기 위해, 변수와 메소드를 정의하는 일종의 틀이다.

<기본 개념>
class Car {
  constructor(modelName, modelYear, type, price){
  
  //class를 생성하기 위한 parameter : modelName, modelYear, type, price
    
  this.modelName = modelName;
  this.modelYear = modelYear;
  this.type = type;
  this.price = price;
    
  }

  //여기서 this는 해당 class의 객체를 의미한다.

  getModelName() {
  return this.modelName;
  }
  getModelYear() {
  return this.modelYear;
  }
  getPrice(){
  return this.price;
  }
  setPrice(price){
  this.price = price;
  }
 }                                   
 
  //여기까지가 객체를 만들기 위한 기본적인 틀이다.(class의 구조)
  //이러한 class를 기본 틀로 삼아, new 키워드를 사용하여 다양한 객체를 만들 수 있다.

  let car = new Car("ionic", "2021", "e", 4000);
    
  console.log(car.getModelName());	// 결과 : ionic
  console.log(car.getModelYear());	// 결과 : 2021
  console.log(car.getPrice());		// 결과 : 4000

  car.setPrice(4100);			//setPrice( ) 함수로 가격 조정
  console.log(car.getPrice());		// 결과 : 4100


  let car2 = new Car("genesis", "2021","g", 6500);
    
  console.log(car2.getModelName());	// 결과 : genesis
  console.log(car2.getModelYear());	// 결과 : 2021
  console.log(car2.getPrice());		// 결과 : 6500


<응용 개념>

//Class 상속

//새로운 Class를 만들 경우, 기존 Class의 기능을 모두 상속 받을 수 있다.


class ElectronicCar extends Car {

  //Car class를 상속받는다.

  constructor(modelName, modelYear, price){  //type 파라미터가 필요 X 경우 
  super (modelName, modelYear, "e", price);  //파라미터들을 정의할 필요 X 
  }

  setChargeTime(time){
  this.chargeTime = time;
  }

  getChargeTime(){
  return this.chargeTime;
  }
 }

  //기존 class의 함수 기능을 그대로 사용할 수도 있고,
  //새로운 함수 기능을 추가할 수도 있다.

  let elecCar1 = new ElectronicCar("ionic", "2021", 4000);
  
  elecCar1.setChargeTime(60);		  //ChargeTime의 파라미터 추가
  console.log(elecCar1.getModelName());	  // 결과 : ionic
  console.log(elecCar1.getChargeTime());  // 결과 : 60

'Javascript' 카테고리의 다른 글

Javascript - Strict Mode  (0) 2021.10.01
Javascript - Error(try, catch, finally)  (0) 2021.10.01
Javascript - 모듈(Module)  (0) 2021.10.01
Javascript - Async/Await  (0) 2021.10.01
Javascript - Promise  (0) 2021.10.01

댓글