YouTipJsref Class Extends
## JavaScript Class `extends` Keyword
The `extends` keyword in JavaScript is used in class declarations or class expressions to create a child class that inherits from another class (the parent class).
Inheritance is a core concept of Object-Oriented Programming (OOP) that promotes code reusability. By extending a class, the child class automatically inherits all properties, getters, setters, and methods defined in the parent class, allowing you to build upon existing functionality without rewriting code.
---
## Syntax
```javascript
class ChildClass extends ParentClass {
// Class body
}
```
### Parameters
* **`ChildClass`**: The name of the new class you want to create.
* **`ParentClass`**: The name of the existing class you want to inherit from. This can be any expression that evaluates to a constructor function or `null`.
---
## The `super()` Method
When inheriting from a parent class, the `super()` method is used inside the child class's `constructor` to call the parent class's constructor.
* **Crucial Rule**: In a child class constructor, you **must** call `super()` before you can use the `this` keyword. If you try to access `this` before calling `super()`, JavaScript will throw a `ReferenceError`.
* Calling `super()` initializes the parent class's properties and binds them to the child class instance.
---
## Code Examples
### Example 1: Basic Class Inheritance
The following example demonstrates how a child class `Brand` inherits properties and methods from a parent class `Company`.
```javascript
// Parent Class
class Company {
constructor(name) {
this.companyName = name;
}
present() {
return "I love " + this.companyName;
}
}
// Child Class inheriting from Company
class Brand extends Company {
constructor(name, age) {
// Call the parent class constructor
super(name);
this.age = age;
}
show() {
// Access the inherited present() method and the child's own age property
return this.present() + ", it was established " + this.age + " years ago.";
}
}
// Instantiate the child class
let myBrand = new Brand("YouTip", 5);
// Output: "I love YouTip, it was established 5 years ago."
console.log(myBrand.show());
```
### Example 2: Method Overriding
A child class can also override methods defined in the parent class. If a method with the same name is defined in both classes, the child class's method will take precedence. You can still call the parent's method using `super.methodName()`.
```javascript
class Animal {
speak() {
return "The animal makes a sound.";
}
}
class Dog extends Animal {
// Overriding the speak method
speak() {
return "The dog barks.";
}
speakLikeParent() {
// Accessing the parent's method explicitly
return super.speak();
}
}
const myDog = new Dog();
console.log(myDog.speak()); // Output: "The dog barks."
console.log(myDog.speakLikeParent()); // Output: "The animal makes a sound."
```
---
## Technical Details
| Feature | Specification |
| :--- | :--- |
| **JavaScript Version** | ECMAScript 2015 (ES6) |
| **Inheritance Type** | Prototype-based inheritance (syntactic sugar over prototypes) |
---
## Browser Support
The `extends` keyword is a standard feature of ECMAScript 6 (ES6) and is fully supported by all modern web browsers.
| Chrome | Edge | Firefox | Safari | Opera |
| :---: | :---: | :---: | :---: | :---: |
| **Yes** | **Yes** | **Yes** | **Yes** | **Yes** |
> **Note**: Internet Explorer 11 and older versions do not support the `extends` keyword or ES6 classes. If you need to support legacy browsers, you must compile your code using a tool like Babel.