<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Class</title>
<script>
// 상속(Extends): 부모클래스가 가진 속성이나 메서드를 상속받아서 자식클래스에서 사용
// 일반 사용법(상속 X)
// 사각형의 둘레와 넓이 - 부모는 사각형, 자식은 정사각형
// 사각형
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getPerimeter() {
return (this.width + this.height) * 2;
}
getArea() {
return this.width * this.height;
}
}
const rectangle = new Rectangle(10, 20);
document.write(`사각형의 둘레: ${rectangle.getPerimeter()}<br />`);
document.write(`사각형의 넓이: ${rectangle.getArea()}<br />`);
// 정사각형
class Square {
constructor(length) {
this.length = length;
}
getPerimeter() {
return this.length * 4;
}
getArea() {
return this.length * this.length;
}
}
const square = new Square(10);
document.write(`정사각형의 둘레: ${square.getPerimeter()}<br />`);
document.write(`정사각형의 넓이: ${square.getArea()}<br />`);
// ★상속 사용법
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getPerimeter() {
return (this.width + this.height) * 2;
}
getArea() {
return this.width * this.height;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = name;
}
getColor() {
// 자식에게만 해당되는 속성이 있다면 이렇게 넣어주면 됨.
return color;
}
}
// const square = new Square(40)
document.write(`정사각형의 둘레: ${square.getPerimeter()}<br />`);
document.write(`정사각형의 넓이: ${square.getArea()}<br />`);
</script>
</head>
<body></body>
</html>