JavaScript Classes: Definition, Syntax, and Usage
JavaScript classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JavaScript are built on prototypes but also have some syntax and semantics that are unique to classes. In this guide, we will explore how to use the class syntax in JavaScript, and how it provides a syntactical sugar for prototypal inheritance and constructor functions.
Defining Classes
Classes are in fact "special functions", and just as you can define function expressions and function declarations, a class can be defined in two ways: a class expression or a class declaration. The body of a class is the part that is in curly braces {}. This is where you define class members, such as methods or constructor. The body of a class is executed in strict mode even without the "use strict" directive.
Class Declaration
Here's an example of a class declaration:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
And here's an example of a class expression:
Class Expression
const Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
Like function expressions, class expressions may be anonymous, or have a name that's different from the variable that it's assigned to. However, unlike function declarations, class declarations have the same temporal dead zone restrictions as let or const and behave as if they are not hoisted.
Class Body
The body of a class is the part that is in curly braces {}. This is where you define class members, such as methods or constructor. The body of a class is executed in strict mode even without the "use strict" directive. A class element can be characterized by three aspects:
- Kind: Getter, setter, method, or field.
- Location: Static or instance.
- Visibility: Public or private.
Together, they add up to 16 possible combinations. To divide the reference more logically and avoid overlapping content, the different elements are introduced in detail in different pages:
- Method definitions
- Public instance method getter
- Public instance getter setter
- Public instance setter
- Public class fields
- Public instance field static
- Public static method, getter, setter, and field
- Private properties
Note: Private features have the restriction that all property names declared in the same class must be unique. All other public properties do not have this restriction — you can have multiple public properties with the same name, and the last one overwrites the others. This is the same behavior as in object initializers.
Constructor
The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class — a SyntaxError is thrown if the class contains more than one occurrence of a constructor method. A constructor can use the super keyword to call the constructor of the super class. You can create instance properties inside the constructor:
class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = 'Square';
}
}
In JavaScript, a class can have a constructor or not. If a class does not have a constructor, then a default constructor is provided by JavaScript. The default constructor is empty and does not take any arguments. If a class has a constructor, then it must be defined using the constructor keyword. The constructor is a special method that is called when an object is created from the class. The constructor method can take any number of arguments, and it can use the this keyword to set properties on the object.
The this keyword
The this keyword refers to the object that is being created. It is used to set properties on the object. For example, the following code creates a Person class with a constructor that takes a name argument and sets the name property on the object:
class Person {
constructor(name) {
this.name = name;
}
}
The super keyword
The super keyword is used to call the constructor of the parent class. It is used to pass arguments to the parent constructor and to set properties on the parent object. For example, the following code creates a Student class that extends the Person class and adds a grade property:
class Student extends Person {
constructor(name, grade) {
super(name);
this.grade = grade;
}
}
Conclusion
In this guide, we explored how to use the class syntax in JavaScript, and how it provides a syntactical sugar for prototypal inheritance and constructor functions. We also looked at how to define classes, the class body, and the constructor method.