Objects

An object is an abstract data type that contains properties and methods.

 

  • Properties are its values
  • Methods are its internal functions

 

Although JavaScript is object oriented, it does not use classes to create objects. The reason being that it is prototype based, not class based.

 

Objects can be created by:

  1. Defining and creating a direct instance of an object
  2. Using a function to define an object, then create new object instances from that function

 

1. Creating a Direct Instance

 

This example creates a new instance of an object using the keyword new and then assigns three properties using the dot operator:

var rider = new Object();

rider.name = "Marquez";

rider.team = "Honda";

rider.pos = 1;

 

Alternatively, the shorthand (using object literals) allows you to specify name: value pairs within {curly braces}. Notice the colon, after the name:

e.g.

var rider1 = {name: "Marquez", team: "Honda", pos: 1} ;

var rider2 = {name: "Lorenzo", team: "Yamaha", pos: 3} ;

 

Unlike other more formal object oriented languages, JavaScript is much looser and an object's methods need to be associated via a prototype. Say a function was declared like so:

 

function displayMe() {

document.write(name + " rides for " + team + " and is currently " + pos + " in the world championship!<br>");

}

 

We then create a prototype to associate the function to the object, like so:

 

rider1.showMe = displayMe ;

 

Notice how the function hasn't been called (since no parentheses were used), as it is just being associated to the rider1 object.

 

However, this would not work since the function does not know which object is calling it, and which values it should use. Therefore the keyword this is used within the function to refer to the current calling object:

 

function displayMe() {

document.write(this.name + " rides for " + this.team + " and is currently " + this.pos + " in the world championship!<br>");

}

Now we can use the function as a method of the calling object:

 

rider1.showMe();

 

Notice the parentheses are now being used to indicate the method should be called.

 

Save & refresh browser:

Marc Marquez rides for Honda and is currently 1 in the world championship!
Jorge Lorenzo rides for Yamaha and is currently 3 in the world championship!

 

 

2. Using an Object Constructor function

 

This technique is closer to that of other object oriented languages, although the class keyword is not used.

 

function rider(name, team, pos) {

this.name = name ;

this.team = team ;

this.pos = pos ;

}

 

The above object constructor can now be used to create objects:

 

var rider1 = new rider("Marc Marquez", "Honda", 1);

var rider2 = new rider("Jorge Lorenzo", "Yamaha", 3);

 

Methods can also be added to the constructor function:

 

function rider(name, team, pos) {

this.name = name ;

this.team = team ;

this.pos = pos ;

 

this.changePos=changePos;
function changePos(newPos) {

this.pos=pos;

}

}

 

 

 

Save & refresh browser:

Marc Marquez rides for Honda and is currently 1 in the world championship!
Jorge Lorenzo rides for Yamaha and is currently 3 in the world championship! 

 

Now let's change their positions.
Marc Marquez rides for Honda and is currently 2 in the world championship!
Jorge Lorenzo rides for Yamaha and is currently 4 in the world championship!

Leave a Reply