JavaScript Prototype Object and Inheritance, Page 2

• facebook
• twitter
• in
• Email

The JavaScript Prototype Object

All JavaScript objects are associated with an internal reference to another object known as the prototype. Whenever a new custom object is created, any properties and methods defined within the prototype are automatically inherited by the custom object (as opposed to those properties and methods being repeatedly redefined), thereby reducing the amount of memory required to hold an object in memory. Therefore the proper way to define the hemisphere() method follows:

function POI(title, latitude, longitude) {
  this.title = title;
  this.latitude = latitude;
  this.longitude = longitude;
}

POI.prototype.hemisphere = function() { 
  if (this.latitude < 0) { 
    return "Southern";
  } else {
    return "Northern";
  }
};

var museum = new POI("Former Soviet Embassy", "38.9044838", "-77.0360489");

var hemisphere = museum.hemisphere();

You might be wondering why properties aren't defined in this fashion. As a matter of fact, they can be:

function POI(title, latitude, longitude) {
  this.title = title;
  this.latitude = latitude;
  this.longitude = longitude;
}

POI.prototype.title = 'Default title';
POI.prototype.latitude = 'Default latitude';
POI.prototype.longitude = 'Default longitude';

JavaScript and Inheritance

The prototype-based approach also lends itself nicely to inheritance. The following example presents a simplified version of the POI class, which is inherited by the Museum class. Notice in particular how the Museum's prototype property is assigned the POI's constructor:

function POI() {
}

POI.prototype.title = 'Default title';

POI.prototype.setTitle = function(title) { 
  this.title = title;
};

function Museum() {
  POI.call(this);
}

Museum.prototype = new POI();

var smithsonian = new Museum();

smithsonian.setTitle('Smithsonian Air and Space Museum');

alert(smithsonian.title);

Further Reading

Quite a bit has been written about JavaScript's object-oriented capabilities; unfortunately much of it is misleading or downright incorrect, therefore be sure to follow up on anything you learn online, particularly when the information hails from older blog posts. I highly recommend reading these three resources to learn more about JavaScript's many misunderstandings:

• Class-based vs. Prototype-based Languages: This excellent tutorial highlights the similarities differences between JavaScript and other object-oriented languages such as Ruby or Java.
• Private Members in JavaScript: In this article, JavaScript guru Douglas Crockford dispels yet another myth regarding JavaScript's object-oriented capabilities.
• JavaScript: The World's Most Misunderstood Programming Language: In this article Crockford dispels many other basic language myths.

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Originally published on https://www.developer.com.

Page 2 of 2