JavaScript: Prototype Inheritance System

Unlike C# and Java, JavaScript uses a preexisting “prototype” object to create all new objects. This means that instead of using static templates to create objects (classes), JavaScript takes either the default prototype object or one of your choosing and duplicates for use as a new object. This duplicate is then modified on-the-fly by the script you write to convert that new object into the object you desire, this can be done by adding variables and functions to the object providing it with its own state and behavior.

'use strict';

// Prototype Object Builder
//  1. Utility Function used to make Prototypal Inheritance easier to accomplish in one action
//  2. Use by passing in a useful base Object which you want to use as the prototype for the new Object
function objectBuilder (protoObject){
    var F = function(){};
    F.prototype = protoObject;
    return new F();
}

// All Objects are linked to a Prototype Object
// 1. All objects created via Literals are linked to Object.prototype by default
// 2. The prototype link is unidirectional, properties of the prototype object are pulled down by the inheriting object
// 3. Updating does not affect the Prototype object since the link is unidirectional
// 4. Augmentation of the Prototype object (adding properties/methods) is instantly available to all inheriting objects

//---------------------------------------------//

// Useful Object for Prototyping purposes
var personPrototype = {
    firstName: 'First name not provided',
    middleInitial: 'initial not provided',
    lastName: 'Last name not provided',
    age: 'Age not provided',
    sayYourName: function(){
        return "Hello, I am " + this.firstName + " " + this.lastName;
    }
};

// Creating custom Person Object from Person Prototype
var tim = objectBuilder(personPrototype);

//---------------------------------------------//

// Displaying that the new Tim Person Object has inherited
// the variables of the Prototype Object
console.log(tim.firstName);
tim.firstName = 'Timothy';
console.log(tim.firstName);

console.log(tim.middleInitial);
tim.middleInitial = 'L';
console.log(tim.middleInitial);

console.log(tim.lastName);
tim.lastName = 'Clark';
console.log(tim.lastName);

//---------------------------------------------//

// Displaying that the new Tim Person Object has inherited
// the functions of the Prototype Object
console.log(tim.sayYourName());

// Adding variables or functions to the Prototype are
// instantly available to inheriting Objects
personPrototype.walk = function(){
    return "Walk, walk, walk...";
};
// Prototype Object now has method
console.log(personPrototype.walk());
// Inherited Object now has method
console.log(tim.walk());

//---------------------------------------------//

// Displaying that augmenting the inherited Object
// does not affect the linked Prototype object
tim.run = function(){
    return "I'm running around like a chicken with its head cut off.";
};
tim.hairColor = "brown";
// Inherited Object now has the new Function
console.log(tim.run());
console.log(tim.hairColor);
// Prototype Object is NOT affected
try{
    console.log(personPrototype.run()); // Returns an error, function does not exist
}catch(error){
    console.log("personPrototype: " + error.message);
}
console.log(personPrototype.hairColor); // Returns undefined, value does not exist

//---------------------------------------------//

// Displaying that changing the values of the Prototype Object's variables does not affect the inheriting Objects
personPrototype.firstName = 'WOOO HOOO';
console.log(personPrototype.firstName);
console.log(tim.firstName);

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#, ASP.net, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s