<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
class Lifecycle{
call () {
this.a()
this.b()
this.c()
}
a() {console.log(`a() method call`)}
b() {console.log(`b() method call`)}
c() {console.log(`c() method call`)}
}
new Lifecycle().call()
//override (child)
class Child extends Lifecycle {
a() {
console.log(`Child a() method`)
}
}
new Child().call()
//override (parents)
class Child2 extends Lifecycle {
a() {
super.a();
console.log(`child a() method`);
}
}
new Child2().call(); // Corrected instantiation and method call
</script>
</head>
<body>
</body>
</html>### Basic Class and Method Invocation
- **Class `Lifecycle`**: Defines a simple class with a `call` method that invokes three other methods (`a`, `b`, and `c`) in sequence. Each of these methods logs a message to the console when called.
- The instantiation and immediate invocation of `call` on a `Lifecycle` object result in the sequential logging of `"a() method call"`, `"b() method call"`, and `"c() method call"` to the console.
### Method Overriding in Child Class
- **Class `Child` extends `Lifecycle`**: Demonstrates overriding the `a` method of the `Lifecycle` class. The overridden `a` method in the `Child` class logs a different message (`"Child a() method"`).
- When `call` is invoked on an instance of `Child`, it results in the logging of the overridden message for `a`, followed by the inherited `b` and `c` method messages from the `Lifecycle` class.
### Using `super` to Call Parent Method
- **Class `Child2` extends `Lifecycle`**: This class also overrides the `a` method but uses the `super` keyword to call the original `a` method from the `Lifecycle` class before logging its own message (`"child a() method"`).
- The instantiation and invocation of `call` on a `Child2` object first call the parent's `a` method (logging `"a() method call"`), then logs the additional message from the overridden method in `Child2`, followed by the inherited `b` and `c` method messages from the `Lifecycle` class.
### Key Concepts Illustrated
- **Method Overriding**: This document showcases how child classes can override methods of their parent classes to provide specialized behavior.
- **The `super` Keyword**: Demonstrates how to invoke a method from the parent class within an overriding method in a child class, allowing the child class to extend or modify the parent class's behavior rather than completely replacing it.
- **Class Inheritance and Method Invocation**: It illustrates the order of method invocation within a class hierarchy, showing how overridden methods replace parent methods in the execution flow, and how the `super` keyword can be used to include the parent class's method execution within the child's method execution.
This example provides a clear demonstration of some of the core principles of object-oriented programming in JavaScript, including class inheritance, method overriding, and the use of `super` to augment rather than replace parent class functionality.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| method) filter() (0) | 2025.01.12 |
|---|---|
| chapter 9) combination of array and object (0) | 2025.01.02 |
| chapter 9) declair class and new instance (0) | 2024.12.31 |
| chapter 9) toString() method override (0) | 2024.12.30 |
| chapter 9) Static keyword (0) | 2024.12.29 |