Export (0) Print
Expand All

Prototypes and Prototype Inheritance

In JavaScript, a prototype is a property of functions and of objects that are created by constructor functions. The prototype of a function is an object. Its main use is when a function is used as a constructor.

function Vehicle(wheels, engine) {
    this.wheels = wheels;
    this.engine = engine;
}

In the example above, the prototype of the Vehicle function is the prototype of any object that is instantiated with the Vehicle constructor.

You can use the prototype property to add properties and methods to objects, even the ones that have already been created:

var testVehicle = new Vehicle(2, false);
Vehicle.prototype.color = "red";
var testColor = testVehicle.color;

The value of testColor is "red".

You can even add properties and methods to predefined objects. For example, you can define a Trim method on the String prototype object, and all the strings in your script will inherit the method.

String.prototype.trim = function()
{
    // Replace leading and trailing spaces with the empty string
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
var s = "    leading and trailing spaces    ";
// Displays "    leading and trailing spaces     (35)"
window.alert(s + " (" + s.length + ")");
// Remove the leading and trailing spaces
s = s.trim();
// Displays "leading and trailing spaces (27)"
window.alert(s + " (" + s.length + ")");

The prototype object can be used to derive one object from another. For example, you can use the Object.create function to derive a new object Bicycle using the prototype of the Vehicle object we defined earlier (plus any new properties you need).

var Bicycle = Object.create(Object.getPrototypeOf(Vehicle), {
    "pedals" :{value: true}
});

The Bicycle object has the properties wheels, engine, color, and pedals, and its prototype is Vehicle.prototype. The JavaScript engine finds the pedals property on Bicycle, and it looks up the prototype chain to find the wheels, engine, and color properties on Vehicle.

In Internet Explorer 11, you can replace the internal prototype of an object or function with a new prototype by using the __proto__ property. When you use this property, you inherit the properties and methods of the new prototype along with other properties and methods in its prototype chain.

The following example shows how you can change the prototype of an object. This example shows how the object's inherited properties change when you change its prototype.

function Friend() {
    this.demeanor = "happy";
}

function Foe() {
    this.demeanor = "suspicious";
}

var friend = new Friend();
var foe = new Foe();

var player = new Object();
player.__proto__ = foe;

friend.ally = "Tom";

if (console && console.log) {
    console.log(player.demeanor === "happy" );      // Returns false
    console.log(player.demeanor === "suspicious");  // Returns true
    console.log(player.ally === "Tom");             // Returns false
    // Turn the foe to a friend.
    player.__proto__ = friend;
    console.log(player.demeanor === "happy");       // Returns true
    console.log(player.demeanor === "suspicious");  // Returns false
    console.log(player.ally === "Tom");             // Returns true
}
Show:
© 2014 Microsoft