1. class 선언하기
- java에서는 클래스를 객체를 만들기 위한 설계도라고 부릅니다.
- 객체를 생성하기 위한 필드와 메소드가 정의되어 있는 설계도입니다.
- 인스턴스라고 하는 것은 클래스로부터 만들어진 객체입니다. 하나의 클래스는 여러개 인스턴스 생성할수있습니다.
- 예시로 동일한 설계도로 여러 대의 자동차를 생산하는 것과 같은 의미입니다.
- 클래스는 일종의 함수지만 function키워드 대신 class키워드를 사용한다.
- 속성은 constructor()메서드 내부에 할당됩니다.
- class는 사실 함수이기 때문에 함수선언식과 변수선언식으로 둘다 선언할 수 있다.
1) 함수선언식의 class문법
## 선언 문법
class 클래스명{
constructor(){
this.속성명 = 값;
}
메서드명(){
}
}
## 선언 예시 코드
class Car {
constructor(name){
this.brand = name;
}
}- 클래스명은 보통 첫글자를 대문자로 쓰는 것이 관례입니다.
## 클래스 호출문법
var 인스턴스명 = new 클래스명();
## 클래스 호출 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 - class문법</title>
</head>
<body>
<script>
class Bungeoppang{
constructor(filling){
this.name = filling + ' 붕어빵';
}
}
let bungeoppang01 = new Bungeoppang('팥');
let bungeoppang02 = new Bungeoppang('슈크림');
let bungeoppang03 = new Bungeoppang('완두앙금');
console.log(bungeoppang01.name);
console.log(bungeoppang02.name);
console.log(bungeoppang03.name);
</script>
</body>
</html>- 붕어빵으로 예시를 들게요. 붕어빵을 일일이 모양까지 만들면 시간이 오래 걸리죠?
- 하지만 붕어빵 틀기계를 사서 찍어내면 어떨 까요? 그럼 금방 많이 만들겠죠?
- 그리고 다양한 종류의 붕어빵은 속재료만 바꾸면 됩니다.
- 그걸 코드로 쓴 예제입니다.
## 결과 보기
- 새로운 인스턴스로 객체로 생성해서 호출해서 사용할 수 있습니다.
2) 변수 선언식의 class 문법
- 많이 사용하지는 않지만 가능한 문법입니다.
## 예시 코드
var Car = class {
constructor(name){
this.brand = name;
}
}- 위의 함수선언식 코드를 변수 선언식으로 변경한 예제입니다.
2. class의 속성과 메서드
## 속성 선언 - 속성은 constructor() 메서드 내부에 작성됩니다.
class 클래스명{
constructor(){
this.속성명 = 값;
}
}
## 메서드 선언 - 메서드는 class 코드 블록 내부에 바로 작성됩니다.
class 클래스명{
메서드명(){
}
}
## 속성과 메서드 선언과 호출
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 - class문법</title>
</head>
<body>
<script>
//설계도 생성
class Bungeoppang{
constructor(filling){
this.name = filling + ' 붕어빵';
}
//메서드 추가
purchase(){
return '저는 ' + this.name + '으로 주세요!';
}
}
//인스턴스 생성
let myBungeoppang = new Bungeoppang('팥');
console.log(myBungeoppang.purchase());
</script>
</body>
</html>- 속성 호출 : 인스턴스명.속성명;
- 메서드 호출 : 인스턴스명.메서드명();
3. 부모클래스를 상속 받는 자손클래스
- 상속 : 부모 클래스의 멤버(필드, 메소드등)를 자식 클래스에게 물려주는 것입니다.
- 부모클래스는 보통 상위클래스, 슈퍼클래스라고도 부릅니다.
- 자손클래스는 보통 하위클래스, 파생클래스라고도 부릅니다.
- 이렇게 나눠서 쓰는 이유는 이미 잘 개발된 클래스를 재사용해서 새로운 클래스를 만들기 때문에 중복되는 코드를 줄여줍니다. 부모 클래스의 수정으로 모든 자식 클래스들도 수정되는 효과를 가져와서 유지보수 시간을 최소화시켜줍니다.
## 자손클래스 문법
class 자식클래스 extends 부모클래스 { }
## 자손클래스 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 - class문법</title>
</head>
<body>
<script>
//설계도 생성
class Ppang{
constructor(filling){
//속성
this.filling = filling;
}
}
//자손처리
class Bungeoppang extends Ppang{
//메서드
purchase(){
return '저는 ' + this.filling + ' 붕어빵으로 주세요!';
}
}
//자손처리
class Ingeoppang extends Ppang{
//메서드
purchase(){
return '저는 ' + this.filling + ' 잉어빵으로 주세요!';
}
}
//인스턴스 생성
let myBungeoppang = new Bungeoppang('팥');
console.log(myBungeoppang.purchase());
let myIngeoppang = new Ingeoppang('슈크림');
console.log(myIngeoppang.purchase());
</script>
</body>
</html>- 빵이라는 큰 설계를 하고 자손으로 붕어빵과 잉어빵 기계틀을 따로 제작해줍니다.
- 그럼 각각의 결곽 잘 나오는 것이 확인됩니다.
- super()메서드를 사용함으로써, 부모의 생성자 메서드를 호출하고 부모의 메서드와 속성을 받아서 사용 가능해집니다.
## 결과 보기
## 부모 클래스 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 - class문법</title>
</head>
<body>
<script>
//설계도 생성
class Ppang{
constructor(filling, size){
//속성
this.filling = filling;
this.size = size;
}
}
//자손처리
class Bungeoppang extends Ppang{
//메서드
purchase(){
return '저는 ' + this.size + '사이즈인 ' + this.filling + ' 붕어빵으로 주세요!';
}
}
//자손처리
class Ingeoppang extends Ppang{
//메서드
purchase(){
return '저는 ' + this.size + '사이즈인 ' + this.filling + ' 잉어빵으로 주세요!';
}
}
//인스턴스 생성
let myBungeoppang = new Bungeoppang('팥', 'small');
console.log(myBungeoppang.purchase());
let myIngeoppang = new Ingeoppang('슈크림','medium');
console.log(myIngeoppang.purchase());
</script>
</body>
</html>- size를 추가해봤습니다.
## 결과 보기
## super() 추가
- 이번에는 사이즈는 붕어빵만 추가된다고 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 - class문법</title>
</head>
<body>
<script>
//설계도 생성
class Ppang{
constructor(filling){
//속성
this.filling = filling;
}
}
//자손처리
class Bungeoppang extends Ppang{
//속성추가
constructor(filling, size){
super(filling); //부모 클래스 속성 상속
this.size = size;
}
//메서드
purchase(){
return '저는 ' + this.size + '사이즈인 ' + this.filling + ' 붕어빵으로 주세요!';
}
}
//자손처리
class Ingeoppang extends Ppang{
//메서드
purchase(){
return '저는 ' + this.filling + ' 잉어빵으로 주세요!';
}
}
//인스턴스 생성
let myBungeoppang = new Bungeoppang('팥', 'small');
console.log(myBungeoppang.purchase());
let myIngeoppang = new Ingeoppang('슈크림');
console.log(myIngeoppang.purchase());
</script>
</body>
</html>- 결과는 같습니다.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 (0) | 2021.03.01 |
|---|---|
| [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 (2) | 2021.03.01 |
| [ES6강좌] 3강 향상된 객체 리터럴(Object Literal) - 오쌤의 니가스터디 (0) | 2021.02.28 |
| [ES6강좌] 2강 화살표함수(Arrow Function) - 오쌤의 니가스터디 (0) | 2021.02.27 |
| [ES6강좌] 1강 변수키워드 const & let - 오쌤의 니가스터디 (0) | 2021.02.26 |
