October 21, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

JavaScript Prototype Object and Inheritance, Page 2

  • June 8, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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:

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.


Tags: JavaScript, object oriented JavaScript

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

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel