<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//basic
class Rectangle {
constructor (width, height) {
this.width = width
this.height = height
}
getPerimeter () {
return 2 * (this.width + this.height)
}
getArea () {
return this.width * this.height
}
}
const rectangle = new Rectangle(10,20)
console.log(`square Perimeter : ${rectangle.getPerimeter()}`)
console.log(`square Area : ${rectangle.getArea()}`)
//differ 1
class Square {
constructor (length) {
this.length = length
}
getPerimeter () {
return 4 * this.length
}
getArea() {
return this.length * this.length
}
}
const square1 = new Square(10)
console.log(`square1 getPerimeter : ${square1.getPerimeter()}`)
console.log(`square1 Area : ${square1.getArea()}`)
//differ 2
class Square1 extends Rectangle {
constructor (length){
super(length, length)
}
}
const square2 = new Square1(10,20)
console.log(`square2 getPerimeter : ${square2.getPerimeter()}`)
console.log(`square2 Area : ${square2.getArea()}`)
//if user write minus integer
class Square2 {
constructor (length) {
this.length = length
}
getPerimeter(){return 4 * this.length}
getArea(){return this.length * this.length}
}
const square3 = new Square2(-10)
console.log(`square3 getPerimeter : ${square3.getPerimeter()}`)
console.log(`square3 Area : ${square3.getArea()}`)
//do not use minus integer
class Square3 {
constructor(length) {
if (length <= 0) {
throw 'the length over than 0'
}
this.length = length
}
getPerimeter(){return 4 * this.length}
getArea(){return this.length * this.length}
}
const square4 = new Square3(-10)
console.log(`square4 getPerimeter : ${square4.getPerimeter()}`)
console.log(`square4 Area : ${square4.getArea()}`)
</script>
</head>
<body>
</body>
</html>### Basic Rectangle Class
- **`Rectangle` class**: Defines a rectangle with width and height properties, methods to calculate perimeter (`getPerimeter`) and area (`getArea`).
- **`rectangle` instance**: Demonstrates creating a `Rectangle` object with a width of 10 and height of 20, then logs its perimeter and area.
### Square Classes Demonstrating Different Approaches
1. **`Square` class (Direct Approach)**:
- Defines a square using a single `length` property.
- Includes methods for calculating perimeter and area, tailored to a square's properties.
- An instance `square1` is created and logged, showcasing simple square functionality.
2. **`Square1` class (Inheritance from `Rectangle`)**:
- Inherits from `Rectangle`, leveraging the rectangle's functionality but ensuring the square's unique property: equal width and height.
- The constructor calls `super(length, length)` to use the `Rectangle`'s constructor appropriately.
- Despite the intention to create a square, the `square2` instance is incorrectly initialized with two arguments (10, 20), which might be a mistake since a square's sides are equal. This could be a demonstration error or a misunderstanding in implementation. The correct initialization should have been with a single length argument.
3. **`Square2` class (No Validation)**:
- Similar to the first `Square` class but demonstrates what happens when negative values are used without validation.
- The instance `square3` is created with a length of -10, leading to potentially unexpected results when calculating perimeter and area.
4. **`Square3` class (Validation Included)**:
- Adds validation to the constructor to ensure the length is positive.
- Attempts to create `square4` with a length of -10, but this would result in an error due to the validation, preventing the calculation of perimeter and area with invalid data.
### Key Observations and Corrections
- The script showcases basic principles of class-based object-oriented programming in JavaScript, including constructor functions, method definitions, inheritance, and basic data validation.
- There is a logical mistake in the creation of `square2` from the `Square1` class, suggesting a misunderstanding or typo since both dimensions for a square should be equal, and a square should be initialized with a single length parameter.
- The error handling in the last example (`Square3`) is a good practice to ensure the integrity of the object's state. However, without a `try-catch` block around the instantiation of `square4`, the script will throw an uncaught exception, halting execution and preventing the logging of `square4`'s properties. This demonstrates the importance of error handling in applications that require validation.
Overall, this script serves as an educational tool for understanding classes, inheritance, and validation in JavaScript, showing both correct implementations and common mistakes.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| class) generate object (0) | 2025.01.25 |
|---|---|
| method) private (1) | 2025.01.24 |
| method) forEach() (1) | 2025.01.22 |
| method) getter and setter method (0) | 2025.01.21 |
| method) JSON.parse() method (0) | 2025.01.20 |