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.

How To Use 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.

Inheritance

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.

Wrapping Up

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.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!