This tutorial was written for CS559 2020 by the course staff, and updated for 2021 and 2022.
We might want to write this as a function so we can make more rectangles:
Note that the
Rectangle function assumes that an empty object was created and stored in
new Rectangle(...) can be viewed as first creating an empty object which is then filled by the code in the
Rectangle function. Note that the word
this is self-referential, here referring to that newly created object. Now
myRectangle now contains the same data it did before, but now we can use the Rectangle constructor to create future Rectangles in a more readable way.
new is used so that Rectangle is called as a constructor; if it was omitted, it would not behave as expected:
this would refer to the calling context, not a newly created object. Assuming it was called from a global context, calling
new would be equivalent to declaring global variables
width with the corresponding values.
Rectangle still can be called as a regular function (with disastrous results). As the programmer, you know that
Rectangle is just another function.
ES6 Class Syntax and Constructors
The ES6 class syntax (which we will use in CS559) allows us to write the constructor function as a class:
Note that in this code, we explicitly tell the compiler that we are defining a
class of objects, and that this class has a special constructor function. We can use this constructor as we did above:
With the advantage that we cannot accidentally forget the
new. As we defined it as a class, the compiler knows that
Rectangle should only be called as a construtor, and it will throw an error if we try to do otherwise. Since constructors are called with
new, we must use that word when creating instances of a class.
Classes provide easy syntax for doing many common object oriented programming things - for example, inheritance and static properties - which we’ll cover in a future tutorial.
We might want to have our rectangle objects have methods (functions that operate on them). We could have defined them using the initial object creation approach.
Note how we have added a
draw function to each rectangle, so the rectangle knows how to draw itself (it can refer to itself via closure). We can call
With ES6 class notation, we can write it more simply:
The way to read this code is that we have defined a class (
Rectangle) that defines a kind of object that has 2 functions associated with it. The constructor is the same as before. The
draw function is a method; and it is shared between objects of class
Rectangle, avoiding the problem we mentioned above.
In methods, the
this variable is bound to the object. In general,
this has a very specific meaning, so we can use it with confidence.
As before, we use the
new keyword to create an object from a class, and method
method of an object
object can be called with
1myRectangle = new Rectangle(10, 10, 20, 20); 2 3// Assume we have some context in which to draw 4myRectangle.draw(context); // Draws the rectangle in the desired position
More resources on ES6 Classes