Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Prototype Keyword Gives JavaScript Object Oriented Inheritance

In object oriented programming, inheritance allows one superclass to be specialized into many subclasses. The advantage of this is that any changes to the superclass automatically propagate to the subclasses. The way JavaScript supports inheritance is not like true object oriented languages like C+.

The JavaScript prototype keyword allows us to add properties and methods to an object or to allow an object to inherit the properties and methods of another object. Lets look at a simple example.

<script>

// constructor for Shape class
function Shape(x, y)
{
   this.x = x;
   this.y = y;
}

// add a method to Shape class
Shape.prototype.getx = function()
{
   return this.x;
};

// constuctor for Circle class
function Circle(x, y)
{
   this.x = x;
   this.y = y;
};

// The Circle class inherits the Shape object methods
Circle.prototype = new Shape();

// add a method to Circle class
Circle.prototype.gety = function()
{
   return this.y;
};

// instantiate a Circle object
var circle1 =  new Circle(10,12);

alert("x=" + circle1.getx() + " y=" + circle1.gety());

</script>

First we use a functional object constructor to create a Shape class with the properties x and y. We then use the prototype keyword to add a getx method to the Shape object. Then we create a Circle class. We use the prototype keyword to make the Circle class inherit the getx method of the Shape class.

After creating the Circle class, we use the prototype keyword to add the gety method to the Circle class. We then create an instance of the Circle object named circle1, initializing it with x=10 and y=12.

The last line of the code displays the values of x and y using circle1's getx method that it inherited from the Shape object, and using circle1's gety method that we added directly to the circle1 object.

This example has demonstrated how to use the prototype keyword to give JavaScript the ability to use inheritance.

More Java Script Code:
• JavaScript Code to Add or Remove Specific Elements of an Array
• JavaScript 24-Hour Trainer
• Where Did the User Click?
• JavaScript Code to Restrict Keyboard Entries
• JavaScript to Set Checkbox to Readonly
• Easy Picture Panning Code
• Using a Select List for Navigation
• Debugging JavaScript : Coercions
• Java Script Code to Factor Numbers
• Synchronous and Asynchronous Script Loading

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268