In JavaScript, classes were introduced in ECMAScript 2015 (ES6) as syntactical sugar over the existing prototype-based inheritance. Classes provide a more familiar and convenient syntax for defining and working with objects and inheritance in JavaScript. Here's a basic overview of how classes work in JavaScript:
You declare a class using the class keyword followed by the class name. Inside the class body, you define class methods.
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.`);
}
}
The constructor method is a special method that gets called when you instantiate a new object from the class. It is used for initializing object properties.
You can define methods inside a class just like regular functions. These methods are shared among all instances of the class.
To create an object from a class, you use the new keyword followed by the class name. This invokes the constructor method of the class.
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.
person2.greet(); // Output: Hello, my name is Bob and I am 25 years old.
Classes support inheritance through the extends keyword. A subclass can inherit properties and methods from a superclass.
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
study() {
console.log(`${this.name} is studying for the ${this.grade} grade.`);
}
}
const student1 = new Student('Charlie', 20, '12th');
student1.greet(); // Output: Hello, my name is Charlie and I am 20 years old.
student1.study(); // Output: Charlie is studying for the 12th grade.
You can define static methods inside a class using the static keyword. Static methods are called on the class itself, not on instances of the class.
class MathUtils {
static add(a, b) {
return a + b;
}
}
console.log(MathUtils.add(5, 3)); // Output: 8
Classes support getter and setter methods using the get and set keywords. Getters and setters allow you to define custom behavior for getting and setting object properties.
class Circle {
constructor(radius) {
this.radius = radius;
}
get area() {
return Math.PI * this.radius ** 2;
}
set diameter(diameter) {
this.radius = diameter / 2;
}
}
const circle = new Circle(5);
console.log(circle.area); // Output: 78.53981633974483
circle.diameter = 10;
console.log(circle.radius); // Output: 5
Classes provide a more organized and intuitive way to work with objects and inheritance in JavaScript, making the language more approachable for developers familiar with object-oriented programming concepts from other languages.