 |
| Javascript Beginners Course: Building Object-Oriented Solutions with Classes and Inheritance in JavaScript |
Classes and inheritance are advanced concepts in object-oriented programming (OOP) that enable you to create reusable and maintainable code in JavaScript. Classes provide a blueprint for creating objects with properties and methods, while inheritance allows objects to inherit properties and methods from other objects. In this chapter, we'll explore classes, constructors, methods, inheritance, and other OOP principles in JavaScript.
Classes and Constructors
A class in JavaScript is a blueprint for creating objects with similar properties and methods. It defines the structure and behavior of objects. Classes are declared using the `class` keyword, and they can contain constructors, methods, getters, setters, and static members.
Example:
```javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
let john = new Person("John", 30);
john.greet(); // Output: Hello, my name is John and I'm 30 years old.
```
Methods and Getters/Setters
Methods are functions defined within a class that perform actions or calculate values based on the object's properties. Getters and setters are special methods that allow you to define custom behavior for accessing and modifying object properties.
Example:
```javascript
class Circle {
constructor(radius) {
this.radius = radius;
}
get area() {
return Math.PI * this.radius ** 2;
}
set diameter(diameter) {
this.radius = diameter / 2;
}
}
let circle = new Circle(5);
console.log(circle.area); // Output: 78.53981633974483
circle.diameter = 10;
console.log(circle.radius); // Output: 5
```
Inheritance and Prototypes
Inheritance allows objects to inherit properties and methods from other objects. In JavaScript, inheritance is achieved through prototypes. Every JavaScript object has a prototype chain that determines which properties and methods it can access.
Example:
```javascript
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
let dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.
```
Static Methods
Static methods are methods that belong to the class itself, rather than to instances of the class. They are called on the class itself, rather than on instances of the class.
Example:
```javascript
class MathUtils {
static square(x) {
return x * x;
}
}
console.log(MathUtils.square(5)); // Output: 25
```
Conclusion
Classes and inheritance are powerful features of object-oriented programming that enable you to create reusable and maintainable code in JavaScript. In this chapter, we've explored classes, constructors, methods, inheritance, and other OOP principles in JavaScript. Understanding how to use classes and inheritance effectively is essential for building complex and scalable JavaScript applications. Keep practicing the examples provided to reinforce your understanding of classes and inheritance in JavaScript.