Introduction to Defining and Extending Classes in JavaScript
JavaScript is an object-oriented programming language. It has the ability to create custom objects and classes. Classes are a powerful way of organizing and structuring complex data. They are a way of creating reusable code for multiple objects. In this tutorial, we will cover how to define and extend classes in JavaScript.
Defining Classes in JavaScript
In JavaScript, classes are defined using the class keyword. For example, we can define a Person class like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
[/dm_code_snippet]
In the above example, we define a Person class. The Person class has two properties: firstName and lastName. It also has a fullName() method, which returns the full name of a person.
To create an instance of a class, you use the new keyword. For example:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let john = new Person('John', 'Doe');
console.log(john.fullName()); // John Doe
[/dm_code_snippet]
Extending Classes in JavaScript
In JavaScript, you can extend an existing class using the extends keyword. For example, we can create a Student class that extends the Person class like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
class Student extends Person {
constructor(firstName, lastName, studentID) {
super(firstName, lastName);
this.studentID = studentID;
}
getID() {
return this.studentID;
}
}
[/dm_code_snippet]
In the above example, we define a Student class that extends the Person class. The Student class has an additional property, studentID, and a getID() method. To access the parent class’s constructor, we use the super() method.
We can create an instance of a Student class like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let jane = new Student('Jane', 'Doe', 123456);
console.log(jane.fullName()); // Jane Doe
console.log(jane.getID()); // 123456
[/dm_code_snippet]
Conclusion
In this tutorial, we covered how to define and extend classes in JavaScript. Classes are a powerful way of organizing and structuring complex data. They are a way of creating reusable code for multiple objects. We used the class keyword to define a class and the extends keyword to extend an existing class.
