These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
JavaScript's constructor function syntax is a pretty unique way of creating objects. Most object-oriented programming languages use classes to do this.
Classes are very similar to constructor functions in that they describe a template for an object rather than an object itself. They are a means of describing the properties and behaviors of objects in a single place.
Occasionally object types will overlap in behavior or properties, where one object type further specifies another object. For instance, a square is a subtype of rectangle and a car is a subtype of vehicle. This is known as inheritance.
Inheritance can be quite convoluted in ES5. You will have to either understand or ignore many details about JavaScript's prototype system (check out Codecademy's Objects II section for a taste of prototypes). Luckily, ES6 joins the rest of the object-oriented world by giving us classes.
Let's take a look at how to define a class using ES6.
class Rectangle {
constructor(width, length) {
this.width = width
this.length = length
}
area() {
return this.width * this.length
}
}
var rect = new Rectangle(10,20)
rect.area() //=> 200
Here, we more explicitly describe our object. Rather than assigning methods inside of a constructor function, our class uses its constructor
method to process any arguments and set up our object. Other methods are defined separately within our class definition.
ES6 classes still use the same new
syntax for object instantiation, so they will be backwards-compatible with your existing code.
To create a more specific version of a class—in our case, creating the subtype of square from our rectangle— we simply use the extends
keyword.
class Square extends Rectangle {
constructor(width) {
super(width, width)
}
}
var square = new Square(10)
square.area() //=> 100
Because we extended our Rectangle
class, we inherited our area
function and did not have to redefine it.
If we do redefine a function, we can still call its original implementation by using the super
keyword. This is precisely what we are doing when we define a new constructor
function. Because squares will always have the same height and width, we don't want to write this out manually each time we instantiate a new square. This also eliminates the potential for any typos that give us irregularly shaped squares.
ES6 classes finally give JavaScript a nice way of constructing objects and inheriting behavior between objects. While it is often useful to learn the "old-fashioned way" of doing things before learning the ES6 way— and this is how we have gone about our learning thus far—we believe that dealing with prototypal inheritance is a notable exception. Feel free to explore it on your own, but you aren't likely to hit an edge case that requires a deeper understanding of prototypes anytime soon.
For now, let's just all be thankful that ES6 finally gave us this nice high-level abstraction for dealing with objects.