Object-oriented programming (OOP) in JavaScript is a way of organizing code by creating objects that have properties and methods. Here's an example:
// Define a class called Person
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
// Define a method called sayHello
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
// Create a new instance of the Person class
const person = new Person('John', 30);
// Call the sayHello method
person.sayHello(); // Output: Hello, my name is John and I am 30 years old.
In this example, we define a class called Person with a constructor that takes two parameters, name and age. The constructor sets the name and age properties on the object. We also define a method called sayHello that logs a message to the console.
We create a new instance of the Person class using the new keyword and passing in John and 30 as arguments to the constructor. We then call the sayHello method on the person object.
We can also use inheritance in JavaScript to create a subclass that inherits properties and methods from a superclass. Here's an example:
// Define a superclass called Animal
class Animal {
constructor(name) {
this.name = name;
}
// Define a method called speak
speak() {
console.log(`${this.name} makes a noise.`);
}
}
// Define a subclass called Dog that inherits from Animal
class Dog extends Animal {
constructor(name) {
super(name);
}
// Override the speak method
speak() {
console.log(`${this.name} barks.`);
}
}
// Create a new instance of the Dog class
const dog = new Dog('Rover');
// Call the speak method
dog.speak(); // Output: Rover barks.
In this example, we define a superclass called Animal with a constructor that takes a name parameter and sets the name property on the object. We also define a method called speak that logs a message to the console.
We then define a subclass called Dog that inherits from Animal using the extends keyword. The Dog constructor calls the super method to call the Animal constructor and pass in the name parameter.
We also override the speak method in the Dog class to log a different message to the console.
We create a new instance of the Dog class using the new keyword and passing in Rover as an argument to the constructor. We then call the speak method on the dog object.
class in JavaScript
A class in JavaScript is a blueprint for creating objects with shared properties and methods. Here's a breakdown of each part of a class:
Class declaration: This is where you declare a new class using the class keyword, followed by the name of the class.
class Person {
// class body
}
Constructor method: This is a special method that gets called when you create a new instance of the class using the new
keyword. It's used to initialize the object with initial values.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
Class methods: These are methods that are added to the class and can be called on instances of the class. You can define them inside the class body, just like the constructor method.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
In this example, we've added a sayHello method to the Person class. This method logs a message to the console that includes the name and age properties of the object.
Static methods: These are methods that belong to the class itself, rather than to instances of the class. They can be called directly on the class, rather than on an instance of the class.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
static create(name, age) {
return new Person(name, age);
}
}
const person = Person.create('John', 30);
In this example, we've added a static create method to the Person class. This method creates a new instance of the Person class and returns it. We're calling the create method directly on the Person class, rather than on an instance of the class.
Inheritance: This is the ability to create a new class that inherits properties and methods from a superclass. You can use the extends keyword to create a subclass.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rover');
dog.speak(); // Output: Rover barks.
In this example, we've created a Animal class with a speak method, and a Dog class that extends the Animal class. The Dog class overrides the speak method to log a different message to the console. We're creating a new instance of the Dog class and calling the speak method on it.
I hope this breakdown helps you understand every part of a class in JavaScript.
About khemeri mohamed khalil
Full-stack JavaScript developer with a passion for building scalable robust web applications using modern technologies. With expertise in both front-end and back-end development
Always eager to share knowledge and provide useful tips and insights for other developers in the community.