<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//private 1
class Square {
#length
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 square = new Square(10)
console.log(`square getPerimeter : ${square.getPerimeter()}`)
console.log(`square Area : ${square.getArea()}`)
//private 2
class Square1 {
#length
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 square1 = new Square1(10)
square1.length = -10
console.log(`square1 getPerimeter : ${square1.getPerimeter()}`)
console.log(`square1 Area : ${square1.getArea()}`)
//private 3
class Square2 {
#length
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 square2 = new Square2(10)
square2.length = -10
console.log(`square1 getPerimeter : ${square2.getPerimeter()}`)
console.log(`square1 Area : ${square2.getArea()}`)
</script>
</head>
<body>
</body>
</html>### Key Points of Each Class:
- **Constructor**: Checks if the provided length is greater than 0. If it's not, an error is thrown, preventing the creation of a Square with a non-positive side length.
- **`getPerimeter` Method**: Returns the perimeter of the square, calculated as four times the length of one side.
- **`getArea` Method**: Returns the area of the square, calculated as the length of one side squared (`length * length`).
### Specifics for Each Square Instance:
- **`square` Instance of `Square`**: Created with a length of 10, it demonstrates the basic functionality of calculating and logging the perimeter and area with valid inputs.
- **`square1` Instance of `Square1` and `square2` Instance of `Square2`**: Both are similarly created with a length of 10, demonstrating the intended functionality. However, after their creation, there's an attempt to modify the `#length` field directly from outside the class by setting `square1.length` and `square2.length` to -10. This operation does not affect the private `#length` field due to JavaScript's encapsulation of private fields. Consequently, the `getPerimeter` and `getArea` methods still return values based on the original, valid length. These attempts highlight a key aspect of private fields: attempts to directly modify them using external assignments (like `square1.length = -10`) will not succeed. Instead, these lines of code inadvertently create new, unrelated public fields on the `square1` and `square2` objects without affecting the internal logic or stored values of the `#length` private fields.
### Conclusion:
Through these examples, the script elegantly illustrates the enforcement of data encapsulation and integrity within JavaScript classes using private fields. It shows how such fields protect class internals from invalid modifications, ensuring that objects like these squares maintain valid states. Furthermore, the failed attempts to directly modify `#length` after object instantiation serve as practical demonstrations of the robustness provided by encapsulation in object-oriented programming.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| function) prompt() (0) | 2025.01.26 |
|---|---|
| class) generate object (0) | 2025.01.25 |
| class) Ractangle class (0) | 2025.01.23 |
| method) forEach() (1) | 2025.01.22 |
| method) getter and setter method (0) | 2025.01.21 |