In JavaScript, classes are a way to create objects and manage
object-oriented programming. Classes provide a clear and concise syntax to
create constructor functions and prototype inheritance. They were introduced in
ECMAScript 6 (ES6) and serve as syntactic sugar over JavaScript's existing
prototype-based inheritance.
### Defining a Class
A class in JavaScript is defined using the `class` keyword.
The basic syntax is as follows:
```javascript
class Person {
// Constructor
method
constructor(name,
age) {
this.name =
name;
this.age = age;
}
// Method
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years
old.`);
}
}
```
### Creating an Instance of a Class
To create an instance of a class, you use the `new` keyword:
```javascript
const person1 = new Person('Alice', 30);
person1.greet(); // Hello, my name is Alice and I am 30 years
old.
```
### Class Methods and Properties
Classes can have methods and properties. Methods are
functions defined within the class, while properties are variables attached to
the class instance.
#### Example with Additional Methods
```javascript
class Person {
constructor(name,
age) {
this.name =
name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years
old.`);
}
haveBirthday() {
this.age += 1;
console.log(`Happy Birthday ${this.name}! You are now ${this.age} years
old.`);
}
}
const person2 = new Person('Bob', 25);
person2.greet(); // Hello, my name is Bob and I am 25 years
old.
person2.haveBirthday(); // Happy Birthday Bob! You are now 26
years old.
```
### Static Methods
Static methods are defined on the class itself, not on
instances of the class. They are called directly on the class.
```javascript
class MathUtilities {
static add(a, b) {
return a + b;
}
}
console.log(MathUtilities.add(5, 3)); // 8
```
### Inheritance
Classes can extend other classes using the `extends` keyword.
This allows for the creation of a class hierarchy.
```javascript
class Animal {
constructor(name) {
this.name =
name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name,
breed) {
super(name); //
Call the parent class constructor
this.breed =
breed;
}
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // Rex barks.
```
### Getters and Setters
Classes can have getter and setter methods to control access
to properties.
```javascript
class Rectangle {
constructor(width,
height) {
this.width =
width;
this.height =
height;
}
get area() {
return
this.width * this.height;
}
set
dimensions(dimensions) {
this.width =
dimensions.width;
this.height =
dimensions.height;
}
}
const rect = new Rectangle(10, 5);
console.log(rect.area); // 50
rect.dimensions = { width: 20, height: 10 };
console.log(rect.area); // 200
```
### Example Usage
Here is a complete example combining various features of
classes:
```javascript
class Vehicle {
constructor(make,
model) {
this.make =
make;
this.model =
model;
}
displayInfo() {
console.log(`Vehicle: ${this.make} ${this.model}`);
}
}
class Car extends Vehicle {
constructor(make,
model, doors) {
super(make,
model);
this.doors =
doors;
}
displayInfo() {
console.log(`Car: ${this.make} ${this.model} with ${this.doors} doors`);
}
}
const vehicle = new Vehicle('Toyota', 'Corolla');
vehicle.displayInfo(); // Vehicle: Toyota Corolla
const car = new Car('Honda', 'Civic', 4);
car.displayInfo(); // Car: Honda Civic with 4 doors
```
Classes in JavaScript provide a structured way to create
objects and handle inheritance, making it easier to work with object-oriented
programming concepts.
