※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
클래스는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다.
● Class 정의
클래스는 클래스명 앞에 class라는 키워드를 사용해서 정의할 수 있다. 그리고 반드시 constructor 함수를 가집니다. constructor 함수는 class로 생성된 객체를 생성하고 초기화하기 위한 특수 함수이다.
constructor 함수에서는 클래스를 생성할 때 필요한 기본 값을 파라미터로 전달받고, 클래스 객체에 변수로 등록하는 코드를 구현한다. 이때 this 키워드를 사용해서 변수를 선언한다.
● Class 사용
이렇게 정의된 클래스는 new 키워드를 사용해서 클래스를 생성할 수 있다.
● Class 내부 함수 정의
클래스에 정의한 각 변수를 set, get 할 수 있는 내부 함수를 추가한다. (예제 코드 참고)
● Class 상속
정의된 클래스를 상속받아서 새로운 클래스를 정의할 수 있다. 이때 상속받은 부모에 해당하는 클래스에 정의된 변수, 함수 등 모든 특성을 그대로 상속받아서 사용할 수 있게 되고, 자식에 해당하는 클래스에는 추가적인 부분만 정의를 하면 된다.
(기존 부모 클래스에 정의된 변수, 함수 + 자식 클래스에서 새로운 기능 추가)
ex.
자동차(Car)클래스를 상속받아 전기 자동차(ElelctricCar) 클래스를 만든다.
(기존의 자동차 기능 + 전기 자동차만의 기능 추가)
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
// 1. Class 정의
// class 클래스명 {
// constructor(매개변수) { // class로 생성된 객체를 생성하고 초기화하기 위한 특수 함수
// // 초기화 코드
// }
class Car {
constructor(modelName, modelYear, type, price) {
this.modelName = modelName;
this.modelYear = modelYear;
this.type = type;
this.price = price;
}
//3. Class 내부 함수 정의
getModelName() {
return this.modelName;
}
getModelYear() {
return this.modelYear;
}
getPrice() {
return this.price;
}
setModelName(modelName) {
this.modelName = modelName;
}
setModelYear(modelYear) {
this.modelYear = modelYear;
}
setType(type) {
this.type = type;
}
setPrice(price) {
this.price = price;
}
}
//2. Class 사용
// 다음 예제 코드처럼 new 키워드를 사용해서 클래스를 생성할 수 있다.
let car = new Car("ionic", "2021", "e", 4000); //아이오닉 차량 생성
let modelName = car.getModelName(); //차량 모델명 가져오기
car.setPrice(4300); //차량 가격 변경
console.log(car.getModelName());
console.log(car.getModelYear());
console.log(car.getPrice());
car.setPrice(4100);
console.log(car.getPrice());
let car2 = new Car("genesis", "2021", "g", 6500);
console.log(car2.getModelName());
console.log(car2.getModelYear());
console.log(car2.getPrice());
//4. Class 상속
//상속받은 Car에 이미 자동차에 대한 특성을 상속 받았기 때문에 충전시간(chargeTime)만 새로 정의
class ElectricCar extends Car {
constructor(modelName, modelYear, price, chargeTime) {
super(modelName, modelYear, "e", price);
this.chargeTime = chargeTime;
}
setChargeTime(time) {
this.chargeTime = time;
}
getChargeTime() {
return this.chargeTime;
}
}
let eleCar1 = new ElectricCar("ionic5", "2021", 4000, 60);
eleCar1.setChargeTime(60);
console.log(eleCar1.getModelName());
console.log(eleCar1.getChargeTime());
</script>
</body>
</html>
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_02. 문법_17_Strict Mode (0) | 2023.11.27 |
|---|---|
| JavaScript_02. 문법_16_Error (0) | 2023.11.27 |
| JavaScript_02. 문법_14_Modules (0) | 2023.11.27 |
| JavaScript_02. 문법_13_02. Async/Await (0) | 2023.11.25 |
| JavaScript_02. 문법_13_01. Promise (0) | 2023.11.23 |
