Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Object

The JavaScript Object object is for creating custom objects that you may assign custom properties and methods to. Property values can be assorted data types such as String, Number, Boolean, Object, Array, etc...

Create a new empty object instance

var player1 = new Object(); // or var player1 = { };

Assign Properties

// Using dot notation player1.name = "Gandalf"; player1.hitpoints = 100; player1.spells = ["Lightning","Fire Ball","Ice Storm"]; // Using square brackets player1["name"] = "Gandalf"; player1["hitpoints"] = 100; player1["spells"] = ["Lightning","Fire Ball","Ice Storm"]; // Using object literal notation(object initializer) player1 = { name: "Gandalf", hitpoints: 100, spells: ["Lightning","Fire Ball","Ice Storm"] };

Reading Specific Property Values

alert( player1.name ); alert( player1.spells ); alert( player1.spells[1] );

List All Properties (loop over object properties)

for( var prop in player1 ){ document.write( prop + " - " + player1[prop] + "<br>" ); }

Assigning Methods

// Assign a custom method to the object player1.takeDamage = function(amount){ this.hitpoints -= amount; }; // Run that method now player1.takeDamage(20); // Show some results alert( player1.hitpoints );

Constructor Function

In order to create object oriented code(like class programming in other languages), we use constructor functions for establishing object instances. This also provides a way to prevent data collisions or value conflicts in dynamic mechanisms that many instances might use simultaneously.

// Create the PlayerClass constructor function PlayerClass(){ // Properties this.name; this.hitpoints = 100; // Methods this.takeDamage = function(amount){ this.hitpoints -= amount; }; } // Create new instances of the PlayerClass var p1 = new PlayerClass(); var p2 = new PlayerClass(); // Adjust property values p1.name = "Gandalf"; p2.name = "Mysterio"; // Inflict damage to each player p1.takeDamage(5); p2.takeDamage(10); // Show some results alert(p1.name+" | "+p1.hitpoints); alert(p2.name+" | "+p2.hitpoints);

Video: Object Oriented Programming Course

prototype Property

The prototype property allows authors to add properties and methods to objects(or alter their default properties). There may be occasions when you must specialize or extend an object in a script. You can also use the prototype property on built-in objects that JavaScript offers like Array, Number, String, etc..., not only on custom objects.

// Add a heal method to the PlayerClass using the prototype property PlayerClass.prototype.heal = function(player, amount){ player.hitpoints += amount; }; // Make player2 heal player1 p2.heal(p1, 5); alert(p1.name+" | "+p1.hitpoints);

Video: prototype Tutorial Video: Adding shuffle() method to Array object

Inheritance

Inheritance is making an object inherit all of the properties and methods of another object, to become a specialized version of the other object. We use the prototype property to make a subclass inherit the characteristics of a parent class. This results in a specialized subclass that can retain its own properties and methods, as well as inherit all of the properties and methods of the parent class.

// Establish a parent class function Parentclass(){ this.parent_property1 = "Hola"; this.parentmethod1 = function(arg1){ return arg1+" Parent method 1 return data ..."; } } // Establish a child class function Childclass(){ this.child_property1 = "Adios"; this.childmethod1 = function(arg1){ return arg1+" Child method 1 return data ..."; } } // Make the Childclass inherit all of the Parent class characteristics Childclass.prototype = new Parentclass(); // Create a new instance of Childclass var instance1 = new Childclass(); // Check to see if instance1 is an instance of both objects alert( instance1 instanceof Parentclass ); alert( instance1 instanceof Childclass ); // Access the instance methods and properties alert( instance1.parentmethod1("RESULT: ") ); alert( instance1.childmethod1("RESULT: ") ); alert( instance1.parent_property1 ); alert( instance1.child_property1 ); // Override parentmethod1 in the Childclass Childclass.prototype.parentmethod1 = function(arg1){ return arg1+" I have overridden Parent method 1"; } alert( instance1.parentmethod1("RESULT: ") );

Video: Inheritance Tutorial

JSON objects are instances of Object objects

var user = { "name": "Henry", "age": 27, "country": "China" }; alert( user instanceof Object ); alert( user.constructor ); alert( user.name );

Video: JSON Programming Course

Properties

Methods

JavaScript

Objects

ArgumentsArrayAudioBooleanDataTransferDateDocumentElementFunctionGlobalHistoryHTMLElementMathNavigatorNumberObjectRegExpScreenStorageStringWindowXMLHttpRequest