this.On the last page, you learned the basic structure for creating a constructor method. At the end of the page, it was mentioned that if there is data specific to the object that will be created from the class, then this should be passed to the constructor as an input parameter. What was not discussed, was how to then deal with this input parameter data or where to store it.
To store data inside a specific object, we will use a syntax known as “this dot”.
this dot references the object in question; itself. Language-wise, this works well, yet is also confusing… For example, if we had a class that describes balls, we may create one instance of the ball (aka, a new ball object) and say “this ball’s color property is red”. In the example, the color of the ball in question could be set using this dot notation, as follows;
class Ball {
constructor() {
this.color = 'red';
}
}
In the above code, every instance or object created from the Ball class would have its color set to 'red'.
Every object has an instance of this.. It refers to the specific object in question. Not another object of the same class. Not another object of a different class. this. refers to the specific instance of a singular object.
this dot notation is how an individual object’s properties are set from within that object and accessed.
You will forget to use this dot notation in your constructor functions. It will break your code, you will not understand why, and then you will become frustrated. Remember, when developing classes, you need to be careful to define properties using this dot (this.) notation.
If you are referring to, or trying to set properties that will belong to an object, you must use this dot. this dot notation is how the JavaScript engine knows that something is a property of a class and not a variable that should be available throughout the JS environment.
In the following; the notation in line 5 creates a new property, known as ‘color’, which will be attached to any new object instances of class type Ball. The notation in line 10 creates a new JavaScript global variable, known as ‘color’. This new variable is attached to the JavaScript environment and NOT new Ball objects.
1
2
3
4
5
6
7
8
9
10
11
12
class Ball {
constructor(){
// The following creates a property
// attached to a new object.
this.color = 'red';
// The following creates a global variable called 'color'
// this variable is available now throughout your code.
// This variable is not attached to new objects of type ball.
color = 'red';
}
}
To pass any input parameters specified in a constructor method to a new instance of an object, they need to be assigned to this dot properties. The following would take a color value, passed to the Ball object, and assign it to the objects color property.
class Ball {
constructor( color ) {
this.color = color;
}
}
The above may look funny. If we can pass input parameters in to the constructor method why should they need to be re-assigned to an object property? There are many reasons for this, but the simplest is that you may not always take a property and assign it like we just did above. It may be used to set something else, etc.
It is perfectly acceptable to do the above, and use the same name for input parameters, as you do for the object property. In the following example, three object properties are set from three separate input parameters. There are also two properties, which are set from a random number generator function.
class Ball {
constructor( x, y, color ) {
this.posX = x;
this.posY = y;
this.deltaX = random(-2, 2);
this.deltaY = random(-2, 2);
this.color = color;
}
}
To access an object property from within the class definition, you also will use this dot notation. You can treat it like a regular variable, in almost every sense, except for appending the name of the property with this..
As an example, let’s keep building the Ball class. One quality that we will want with this ball, is an ability to move it around the canvas. So, let’s create a second method, called move, which calculates and updates the position of the ball on the canvas. To do this, the object will access the current “x position” (this.posX) value, add the amount of distance to move (this.deltaX), and then reassign the new value back to the “x position” (this.posX).
The uppercase greek letter “delta” (∆) is often used to describe “change” in mathematical functions. In code, when describing movement functions, we will often stick with this convention. When you see the word “delta” it often means “change” of some sort. In the below example, “delta” is the amount of pixels to move/change in position, on either the X or Y axis, every frame.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Ball {
constructor( x, y, color ) {
this.posX = x;
this.posY = y;
this.deltaX = random(-2, 2);
this.deltaY = random(-2, 2);
this.color = color;
}
move() {
// update the x and y positions
this.posX = this.posX + this.deltaX;
this.posY = this.posY + this.deltaY;
}
}