Now that we know what objects are, let’s see how we can create and use our own objects in traditional Javascript, ES5, by going through several practical examples.
In previous chapters of this we saw the . In addition, we were giving a fairly complete review of the different .
Now that we have got to know the objects a bit and have learned how to use them, we can move on to a more advanced topic, such as building our own objects, which can be useful on certain occasions for advanced topics.
So we are going to see how we can define our own objects, with their properties and methods, so that we learn the mechanism, but without going too much into practical aspects that we leave for future examples.
To create our own objects we must create a class, which we remember is something like the definition of an object with its properties and methods. To create the class in Javascript we must write a special function, which will be in charge of building the object in memory and initializing it. This function is called a constructor in object-oriented programming terminology.
function MyClass (initialization_value){ //Initialize the properties and methods this.myProperty = initialization_value this.myMethod = name_of_a_defined_function }
That was a builder. Use the keyword this to declare the properties and methods of the object being constructed. This refers to the object that is being built, so let’s remember that we will call this function to build an object. We are assigning values to the object that is being built in its properties and we are also assigning names of functions defined for its methods. When constructing an object, it is technically the same to declare a property or a method, it only differs in that we assign a value to a property and a function to a method.
The StudentUniversity class
We will see everything more carefully if we make an example. In this example we are going to create a college student object. As a student you will have characteristics such as name, age or registration number. In addition, it may have some method such as enrolling the student.
Builder: We place properties
Let’s see how to define the constructor of the CollegeStudent class, but we’re only going to set the properties of the class for now.
function CollegeStudent(name, age) { this.name = name this.age = age this.RegistrationNum = null }
The initialization values are received by the constructor as parameters, in this case it is only the name and the age, because the enrollment number is not received by a student until it is enrolled. That is why we assign null to the numMatricula property.
write methods
Now we are going to continue with that definition of the class to incorporate methods.
To build a method we must create a function. A function that is intended to be a method for a class can also use the variable this, which refers to the object on which the method is called. Well, we must remember that to call a method we must have an object and this refers to that object.
function enroll(num_matricula){ this.numMatricula = num_matricula }
The registration function receives a registration number by parameter and assigns it to the numMatricula property of the object that receives this method. Thus we fill in the property of the object that we were missing.
Let’s build another method that prints the student data.
function print(){ document.write(“Name: ” + this.name) document.write(“
Age: ” + this.age) document.write(“
License plate number: ” + this. registration number) }
This function prints all the properties of the object that receives the method.
Constructor: We place methods
To place a method in a class we must assign the function that we want the method to be to the object that is being created. Let’s see how the constructor of the StudentUniversity class would look with the enroll method.
function UniversityStudent(name, age) { this.name = name this.age = age this.Matriculanum = null this.matriculate = matriculate this.print = print }
We see that in the last lines we assign to the methods the names of the functions that contain their code.
To instantiate an object
To instantiate objects of the StudentUniversity class, we use the new statement, which we have already seen on other occasions.
myStudent = new UniversityStudent(“José Díaz”,23)
Working with the class, creating instances and using objects
To illustrate the work with objects and finish with the example of the UniversityStudent, we are going to see all this process in a single script in which we will define the class and then we will use it a little bit.
//we define the method enroll for the class StudentUniversity function enroll(num_matricula){ this.numMatricula = num_matricula } //define the method print for the class StudentUniversity function print(){ document.write(“
Name: ” + this .name) document.write(“
Age: ” + this.age) document.write(“
Number of registration: ” + this.numMatricula) } //we define the constructor for the class function StudentUniversity(name , age){ this.name = name this.edad = age this.numMatricula = null this.matriculate = matriculate this.print you = print you } //create a student myStudent = new UniversityStudent(“José Díaz”,23) //le we ask that myStudent.print() be printed //we ask that myStudent.enroll(305) be enrolled //we ask that it be printed again (with the enrollment number filled in) myStudent.print()
If we want, we can.
We’re not going to talk more about how to create and use our own objects at the moment, but in the future we will cover this topic in more depth and do some additional examples.
Facebook Comments
Disqus