On the last page, you learned the basic structure for creating a constructor method, and you learned about input parameters. 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. You can think of it as creating a variable inside the class that we can access later from the object. Whew.. we will look at examples. I promise!
Let’s go back to our Person class. I reduced the number of properties to make it easy to digest. Let’s look at how this might work:
<html>
<head>
<title>OOP</title>
<script>
class Person{
constructor()
{
this.eyeColor = "blue";
this.hairColor = "red";
}
showInformation()
{
document.getElementById("person").innerHTML = "Eye Color: " + this.eyeColor + "<br>Hair Color: " + this.hairColor;
}
}
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
In this code, the class initializes the hair and eye color will be through the constructor. Notice, nothing has been created yet. However, the this keyword allows us to get the properties in the class.
You do not need to send any input parameters to the constructor. Calling a constructor without parameters invokes the default constructor. This allows you to give default values to your properties.
class Person{
constructor()
{
this.eyeColor = "blue";
this.hairColor = "red";
}
}
}
In this example, this.eyeColor will have a value of blue, and this.hairColor will have a value of red, which will be attached to any new object instances of class type Person.
Never fear, if you forget this.. It is common, and it can cause errors. However, you are well-equipped to handle the mistakes now that you have debugging skills. So, go back to what you know and see what you can figure out.
One more thing, though, if you create a variable without this, it will become a global variable accessible anywhere.
class Person{
constructor()
{
this.eyeColor = "blue";
this.hairColor = "red";
eyeColor = "green";
}
}
}
Remember the property, this.eyeColor, will be attached to any new object instances of class type Person. However, the eyeColor two lines later create a new JavaScript global variable, known as ‘eyeColor’. This new variable us attached to the JavaScript environment and NOT any new Person objects.
To pass any input parameters specified in a constructor method to a new instance of an object, they need to be assigned to the this properties. The following would take an eyeColor and hairColor value passed to the Person object, and attach it to the object’s eyeColor and hairColor properties, respectively.
class Person{
constructor(eyeColor, hairColor)
{
this.eyeColor = eyeColor;
this.hairColor = hairColor;
}
}
}
The above may look funny. If we can pass input parameters into the constructor method, why should they need to be re-assigned to an object property? There are many reasons for this, but merely coming up with variables names gets hard after a while.
One more thing, in JavaScript, you can only have one constructor defined. In other languages, you can have multiple constructors.
To access an object property from within the class definition, you also will use this notation by appending the variable name to this.
class Person{
constructor(eyeColor, hairColor)
{
this.eyeColor = eyeColor;
this.hairColor = hairColor;
}
showInformation()
{
document.getElementById("person").innerHTML = "Eye Color: " + this.eyeColor + "<br>Hair Color: " + this.hairColor;
}
}
}
So, how do we create new objects from classes?