Basics of JavaScript Class Inheritance
The ECMAScript 2015 definition brought with it the introduction of class
syntax within the JavaScript language. Previously the only way to do this was with TypeScript or some other language that would transpile down to JavaScript code. With ECMAScript 2015, you can now declare and use classes directly in the JavaScript language itself. Plus, this is a feature that is supported by all the modern web browsers too!
Previously the way to do Object Oriented Programming (OOP) in JavaScript was to use Prototypal Inheritance. This made use of the object.prototype
property to do inheritance in a way that’s different than most other object oriented languages; such as C# or Java. With the addition of being able to define and use Classes in JavaScript, you can now do object oriented programming in JavaScript using the method we’ve all become accustomed to with other OOP languages.
Browser Support: JavaScript
class
inheritance is supported by all modern web browsers; like Chrome, FireFox, and Safari. However, be aware that older browser versions, and Internet Explorer do not support this.
Define a class
in JavaScript
A class
definition in JavaScript is used to define a class with its constructor
, as well as it’s properties and methods. This is done in JavaScript very similarly to how it’s done in other OOP languages; like C# and Java.
Here is a simple example definition of a Person
Class:
class Person {
constructor(first, last) {
this.firstName = first;
this.lastName = last;
}
getFullName() {
return this.firstName + ' ' + this.lastName;
}
}
The class
keyword is used to define the Class in JavaScript. Then within the Person
class there is a constructor
method defines, as well as any other features of the class.
Notice the constructor
method within the class
definition. This is a Constructor method that will be executed every time an instance of the class in instantiated. The Constructor can also be defined to accept anywhere from zero to many parameters so that the class can be passed initial state upon instantiation.
Notice the getFullName()
method declaration within the class
definition. This is showing an example of how to define a function on the class. This function will later be able to be called on any objects created from the class.
Within the constructor
there are two properties on the class being set; the firstName
and lastName
properties. Notice these properties have no property definition within the class
as would be done in other languages; like C# or Java. The reason there is no property definition is because JavaScript is a Dynamic language. This means that setting a property on the object will in turn create it if it doesn’t exist. You are likely very familiar with this as it’s a core piece of how the JavaScript language works, and you’ve likely seen / done this many times already.
Instantiate an Object from a class
Now that you have a class
defined within JavaScript, you can use the new
keyword to easily create a new instance of it.
Here’s an example of doing this:
var p = new Person('Chris', 'Pietschmann')
Notice we are passing in values for the parameters defined on the constructor
method of the class.
After the object has been instantiated from the class
, you can work with it in the normal fashion you are familiar with other objects and libraries you’ve used in JavaScript:
Here’s an example of setting a property and calling a method on the object instance:
// set property
p.firstName = 'Christopher';
// call method
var fullName = p.getFullName();
Class Inheritance in JavaScript
Once you have a class
in JavaScript, you can easily create other classes that inherit from this class. Defining these ‘subclasses’ is done by using the extends
keyword to tell JavaScript your new class
is to inherit from a particular base class.
Here’s an example of a Teacher
subclass that inherits from Person
:
class Teacher extends Person {
constructor(first, last, grade) {
// call the base class constructor
super(first, last);
this.grade = grade;
}
}
As you can see, the extends
keyword is used to tell JavaScript that the Teacher
class is to inherit from the Person
class. This means that the constructor, properties and method of the “super” base class are available to the subclass.
Notice that the Teacher
class implements its own constructor
method. This is so you can instantiate an instance of this class and pass it any necessary parameters / state to start with. Within the subclass Constructor, it first calls the super()
method. The super()
method is going to refer to the base class constructor
method. When instantiating a subclass, you need to call the super()
method and pass it any necessary parameters the base class is expected. This will not only instantiate the object as you’re expecting, but the super()
method also must be used to properly initialize the this
keyword for the newly-allocated object. By calling super()
within the constructor
, the this
keyword will be setup as a reference to the newly created object. This is not something that is automatically initialized for the class by using the extends
keyword.
Tip: By calling
super()
within theconstructor
, thethis
keyword will be setup as a reference to the newly created object. This is not something that is automatically initialized for the class by using theextends
keyword.
This Teacher
class example is extending the Person
base class with an additional grade
property. You can call this property, or any other defined methods on the subclass, just as you would properties or methods of the base class.
Here’s an example of instantiating the Teacher
class and calling its properties and methods:
// instantiate the object
var t = new Teacher('Chris', 'Pietschmann', 'Third Grade');
// set properties
t.firstName = 'Christopher';
t.grade = 'Fourth Grade';
// call method from base class
var fullName = t.getFullName();
Override Base Class Methods within Subclass
With Object Oriented Programming (OOP) there are times when you need to override the functionality of a base class. You may need to extend, or even replace, the base class functionality. The class
inheritance of JavaScript as defined by ECMAScript 2015 allows this to be done easily, and similarly to how it’s done in other OOP languages; like C# or Java.
Here’s an example of the above Teacher
subclass that overrides the getFullName
method of the Person
base class:
class Teacher extends Person {
constructor(first, last, grade) {
// call the base class constructor
super(first, last);
this.grade = grade;
}
getFullName() {
return this.firstName + ' ' + this.lastName + ' (' + this.grade + ')';
}
}
As you can see, this override example of the getFullName
method, is completely replacing it with a new method definition. When the getFullName
method is called on the Teacher
objects, this definition will be executed, and the base class definition will no longer be executed.
Extend Base Class Methods within Subclass
There are times when the base class method provide functionality that’s close to what you need in the base class, or maybe it provides a useful function for the base class. At these times, it’s useful to be able to call the base class method from the subclass while still overriding / replacing the base class method with the same name.
To do this you can call the base class method using the super
keyword within the subclass method. Here’s an example, similar to the previous one, that overrides the base class getFullName
method while calling the base class method as well:
class Teacher extends Person {
constructor(first, last, grade) {
// call the base class constructor
super(first, last);
this.grade = grade;
}
getFullName() {
return super.getFullName() + ' (' + this.grade + ')';
}
}
As you can see, by calling the base class method as made available through the super
keyword within the subclass method, you can both override the base class method and utilize its functionality at the same time.
Wrap Up
The Prototypal Inheritance of JavaScript was a little complex to get used to when coming from a greater familiarity with the Class Inheritance used in other popular Object Oriented Programming (OOP) languages; like C# or Java. The addition of Class Inheritance (via the class
and extends
keywords) in JavaScript brings with it a more familiar approach to instantiating objects and setting up subclass inheritance. Also, with this feature being supported by all of the modern browsers, there’s no reason you couldn’t start using class
inheritance today within your JavaScript projects. Although, keep in mind that existing code bases likely will still use prototype
inheritance for some time, so having a basic familiarity with Prototypal Inheritance may still be useful.
P.S. The basics of JavaScript class inheritance outlined in this article should get you going with these features nicely. But, keep in mind there are also additional features of JavaScript classes like Getters and Setters that can be used with class
inheritance too.