This article presents an overview of classes in JavaScript. A class can be seen as blueprints or templates for creating objects. Classes are a way to bundle the properties and the methods that act on those properties (encapsulation). Constructors are used to initialize the properties of the class when you create a new object. Inheritance is a way to create a class hierarchy and reuse (extend) code. You can also override methods and customize your classes while using inheritance.
Classes and constructors
class
keyword. Here's a class declaration for our Person
from the previous article:
class Person { name; constructor(name) { this.name = name; } introduceSelf() { console.log(`Hi! I'm ${this.name}`); } }
This declares a class called Person
, with:
- a
name
property. - a constructor that takes a
name
parameter that is used to initialize the new object'sname
property - an
introduceSelf()
method that can refer to the object's properties usingthis
.
The name;
declaration is optional: you could omit it, and the line this.name = name;
in the constructor will create the name
property before initializing it. However, listing properties explicitly
in the class declaration might make it easier for people reading your
code to see which properties are part of this class.
You could also initialize the property to a default value when you declare it, with a line like name = '';
.
The constructor is defined using the constructor
keyword. Just like a constructor outside a class definition, it will:
- create a new object
- bind
this
to the new object, so you can refer tothis
in your constructor code - run the code in the constructor
- return the new object.
Given the class declaration code above, you can create and use a new Person
instance like this:
const giles = new Person("Giles"); giles.introduceSelf(); // Hi! I'm Giles
Note that we call the constructor using the name of the class, Person
in this example.
Omitting constructors
If you don't need to do any special initialization, you can omit the constructor, and a default constructor will be generated for you:
class Animal { sleep() { console.log("zzzzzzz"); } } const spot = new Animal(); spot.sleep(); // 'zzzzzzz'