[ES6] 4. Class 추가

윤재열·2023년 3월 15일
0

ES6

목록 보기
4/6

1. class 선언하기

  • java에서는 클래스를 객체를 만들기 위한 설계도 라고 부릅니다.
    • 객체를 생성하기 위한 필드와 메서드가 정의되어 있는 설계도 입니다.
    • 인스턴스라고 하는 것은 클래스로 부터 만들어진 객체입니다.
    • 하나의 클래스는 여러개 인스턴스를 생성할 수 있습니다.
    • 예시로 동일한 설계도로 여러 대의 자동차를 생산하는 것과 같은 의미입니다.
    • 클래스는 일종의 함수지만 function 키워드 대신 class 키워드를 사용합니다.
    • 속성은 constructor()메서드 내부에 할당됩니다.
    • class는 사실 함수이기 때문에 함수선언식과 변수선언식으로 둘다 선언 할 수 있습니다.

1) 함수선언식의 class 문법

선언 문법

class 클래스명{
  	constructor(){
      this.속성명 =;
    }
  메서드명(){
  }
}

선언 예시 코드

class Car {
  constructor(name){
    this.brand = name;
  }
}
  • 클래스명은 보통 첫글자를 대문자로 쓰는 것이 관례입니다.

클래스 호출 문법

const 인스턴스명 = new 클래스명();

클래스 호출 예시 코드

class Car {
  constructor(name){
    this.brand = name;
  }
}

const myCar = new Car("Audi");

console.log(myCar.brand);
  • 새로운 인스턴스로 객체를 생성해서 호출해서 사용할 수 있습니다.

2) 변수 선언식의 class 문법

  • 많이 사용하지는 않지만 알아두면 쓸만한 문법입니다.

예시 코드

const Car = class {
  constructor(name){
    this.brand = name;
  }
}
const myCar = new Car("Audi");
console.log(myCar.brand);

Class 속성과 메서드

속성 선언

속성은 constructor()메서드 내부에 작성됩니다.

class 클래스명{
  constructor(){
    this.속성명 =;
  }
}

메서드 선언

메서드는 class 코드 블록 내부에 작성됩니다.

class 클래스명{
   메서드명(){
   }
}

속성과 메서드 선언과 호출

class Car {
  constructor(name){
  	this.brand = name;
  }

  //present라는 메서드 추가
  present(){
  	return '나는 ' + this.brand + '를 소유하게 되었다.';
  }
}
//새로운 객체 생성
const myCar = new Car("Audi");
// 생성자 함수는 객체 초기화 할때 자동으로 호출

console.log(myCar.brand);
console.log(myCar.present());

주의할 점!
  • 속성 호출 : 인스턴스명.속성명;
  • 메서드호출 : 인스턴스명.메서드명();

3. 부모클래스를 상속 받는 자손 클래스

  • 상속 : 부모 클래스의 멤버(필드,메서드)를 자식 클래스에게 물려주는 것입니다.
  • 부모 클래스 : 상위 클래스, 슈퍼클래스 라고도 부릅니다.
  • 자손클래스 : 하위클래스,자식클래스,파생클래스 라고도 부릅니다.

상속을 사용하는 이유

  • 이미 잘 개발된 클래스를 재사용하여 새로운 클래스를 만들기 때문에 중복되는 코드를 줄여줍니다.
  • 부모 클래스의 수정으로 모든 자식 클래스들도 수정되는 효과를 가져오므로 유지보수 시간을 절약시켜줍니다.

자손 클래스 문법

class 자식클래스 extends 부모클래스{
}

자손 클래스 예시 코드

  • 아래와 같이 super() 메서드를 사용함으로써, 부모의 생성자 메서드를 호출하고 부모의 메서드와 속성을 받아서 사용 가능해집니다.
 class Car {
   constructor(name){
   	this.brand = name;
   }

  //present라는 메서드 추가
  present(){
  	return '나는 ' + this.brand + '를 소유하게 되었다. ';
  }
}

//model만 정의할 자손 클래스
class Model extends Car {
  constructor(name, mod){
    super(name); //super()메서드는 부모 클래스를 나타냄

    this.model = mod;
  }

  show(){
  	return this.present() + '그것은 ' + this.model + '이다.';
  }
}

const myCar1 = new Model("BMW","X7");
const myCar2 = new Model("Ford","Mustang");

console.log(myCar1.show());
console.log(myCar2.show());

profile
블로그 이전합니다! https://jyyoun1022.tistory.com/

0개의 댓글