Objects
JavaScript can be used to define objects. These objects act like classes in that they contain properties and methods. Like other languages, you use objects in JavaScript to make your code more readable, easier to understand, and thus more maintainable. There are two primary ways to create objects in JavaScript: using the literal notation, and using the object construction notation. Let’s look at each.
Literal Notation
You create an object using the literal notation by assigning a variable as the object name and then using brackets to contain the properties and method for the object. Each property and method is defined using a colon and separated by a comma. The methods are defined as a function. The following shows an object created in JavaScript using literal notation.
var ride = {
bikeType: 'Road',
weather: 'Clear',
distanceMiles: 22,
timeMinutes: 90,
averageSpeed: function () {
return this.distanceMiles / (this.timeMinutes / 60);
}
}
Notice that in this example, the method averageSpeed used the this keyword to reference properties of the object.
You can also assign properties and methods directly to a blank object (or add properties and methods to an existing object). You do so with the dot notation. The following code starts by defining an object using empty brackets. It then adds properties and a method using assignment (=).
var ride = { };
ride.bikeType = 'Road';
ride.weather = 'Clear';
ride.distanceMiles = 22;
ride.timeMinutes = 90,
ride.averageSpeed = function () {
return this.distanceMiles / (this.timeMinutes / 60);
};
Object Constructor Notation
The constructor notation allows you to create objects using a constructor (a method that is used to define an object). You can do so in two ways. First, you can create an instance of an Object type using the new keyword. You can then add your properties and methods to that object. The following shows an example.
var ride = new Object();
ride.bikeType = 'Road';
ride.weather = 'Clear';
ride.distanceMiles = 22;
ride.timeMinutes = 90,
ride.averageSpeed = function () {
return this.distanceMiles / (this.timeMinutes / 60);
};
Second, you can use a function to write a named constructor for an object. This function will take the object values as parameters. It then uses the this keyword to define properties and methods. You can then use this constructor to create one or more instances of your object using the new keyword. The following shows this example.
function Ride(bikeType, weather, distanceMiles, timeMinutes) {
this.bikeType = bikeType;
this.weather = weather;
this.distanceMiles = distanceMiles;
this.timeMinutes = timeMinutes,
this.averageSpeed = function () {
return this.distanceMiles / (this.timeMinutes / 60);
};
}
var myRide = new Ride('Road', 'Clear', 22, 90);
JavaScript and Intellisense
Visual Studio provides IntelliSense when working with JavaScript in the IDE. Figure 18.1 shows an example calling the Ride function with constructor notation.
Using, Adding, and Removing Items
You can use an object’s properties in methods with the dot notation. For example, to get the weather property for the ride object, you would write this.
var w = ride.weather;
You can also access this property using braces, as in the following.
var w = ride['weather'];
You can follow this same syntax for writing values like this:
ride.weather = 'Cloudy';
You can clear a property by setting it to a blank string as in this example.
ride.weather = '';
Alternatively, you can remove a property from an object. You do so using the delete keyword, as in the following.
delete ride.weather;
Finally, you can add new properties and methods to an object simply by defining them using the dot notation. The following shows an example of adding a method to an existing instance of Ride created using the constructor notation (last example of the prior subsection).
myRide.ToString = function () {
return 'Bike type: ' + this.bikeType + ' Weather: ' +
this.weather + ' Average Speed: ' + this.averageSpeed();
};
alert(myRide.ToString());