1. Home
  2. Computing & Technology
  3. JavaScript

Object Oriented JavaScript
9. Inheritance and "constructor"

By , About.com Guide

Inheritance from one object to another works very simply in JavaScript. When you create an object by copying another object the new object inherits all the properties and methods that belong to the object that you are copying. Multiple levels of inheritance are supported the same way since if that object is then copied all of the properties and methods of that object are then inherited by the new object including those that it had inherited from the object it was copied from.

This inheritance isn't just limited to the time that we make the actual copy though. Every object that we create from another object automatically has two properties that maintain the connection between objects that are copied from other objects for as long as those objects exist.

We have already seen on of these two properties - the "prototype" property allows methods to be shared with any objects copied from an object without the method itself needing to be shared. Instead a link to the method in the original object is provided from the new object allowing it to access the method without needing to copy the code.

The second of these two methods is "constructor" and it is even more powerful when it comes to the link between objects that are copied from other objects as it provides a way of accessing the object that the current object was copied from without needing to reference it directly. Let's assume we have created a new object based on an old one using:


var newObj = new oldObj;

The property newObj.constructor is now identically equal to the object oldObj and all the properties and methods of oldObj can be referenced just as well using newObj.constructor. This opens up all sorts of possibilities for what we can do with our objects particularly since JavaScript allows us to dynamically add properties and methods to an object at any time rather than limiting us to defining them all when the object is first created (the way that many object oriented languages do).

One example of the power of this prioperty is that we can use it to add a method to the parent object (the one that the current object was copied from) that can then be available for all of the other objects that have inherited (been copied) from that same parent. For example:


var newObj1 = new oldObj;
var newObj2 = new oldObj;
newObj1.constructor.prototype.newMethod = function() {...}
newObj2.newMethod();

If you imagine that those four statements are scatterd through your JavaScript in a way that results in their being run in that order. At the time that newObj1 and newObj2 are created from oldObj the oldObj.newMethod() doesn't exist and so can't be run. The third statement uses the constructor property of newObj1 to reference oldObj and defines newMethod for that object using the protptype property to allow the method to be shared between all the objects that inherit from that object without their needing to make their own copy. This means that newMethod is now available for newObj2 to run since newObj2 inherits from oldObj even though the method did not exist at the time that the original copy was made.

You are not just limited to accessing the parent object via the constructor property either. You can access the object that the parent object was copied from by using newObj.constructor.constructor and so on up the heirarchy all the way back to the Object object (which is the one in JavaScript from which all other objects are created and where they inherit the constructor, prototype properties and toString and valueOf methods from).

All the Object Oriented JavaScript Tutorials

  1. What is Object Oriented JavaScript?
  2. The Benefits of OO JavaScript
  3. JavaScript's Built in Objects
  4. Extending Built In Objects
  5. Creating Objects from Existing Objects
  6. Creating New Objects Without Copying Existing Ones
  7. Dot Notation and "this"
  8. prototype
  9. Inheritance and "constructor"
  10. Associative Array Notation
  11. Create Method if Doesn't Exist
  12. "self" and Multiple Objects
  13. Defining Objects with JSON
  14. Namespaces
  15. Lazy Definition
  16. Extending Methods
  17. Copying Objects
  18. Private Properties and Privileged Methods
  19. Public Access to Private Methods
  20. Chaining Methods
  21. Singletons
Explore JavaScript
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Object Oriented JavaScript
  6. Inheritance and "constructor">

©2010 About.com, a part of The New York Times Company.

All rights reserved.