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
tim.firstName = 'Timothy';

tim.middleInitial = 'L';

tim.lastName = 'Clark';


// Displaying that the new Tim Person Object has inherited
// the functions of the Prototype Object

// 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
// Inherited Object now has method


// Displaying that augmenting the inherited Object
// does not affect the linked Prototype object = function(){
    return "I'm running around like a chicken with its head cut off.";
tim.hairColor = "brown";
// Inherited Object now has the new Function
// Prototype Object is NOT affected
    console.log(; // Returns an error, function does not exist
    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';

JavaScript: Objects


Objects in JavaScript are class-free, meaning that they are not created via a static class (template) as they are in object-oriented programming languages such as C# or Java. Instead, JS objects are created through a prototypal system (a topic for another post). There is a base prototype object in JavaScript from which all other objects are created.

Literal Notation

Because of this prototypal system, all custom objects are created inline in a given script. Custom JS objects are primarily created through what is called a literal notation, they are ‘literally’ written out line-by-line in the script and are ‘literally’ built in memory as the script executes line-by-line.

Mutable Key/Value Collections

Objects in JavaScript are mutable, meaning they can be altered over time as a script executes and it is used, passed around, and manipulated by the script. They are also keyed collections, meaning JS objects are pretty much dictionaries with keys indicating named properties and their associated values. Due to this, JS object properties can be accessed in two ways, the traditional ‘Dot’ notation as seen in object-oriented programming languages such as C# and Java or through array like notation utilizing index operators (square brackets).


JS Objects are always passed by reference, meaning as an object is passed from function to function or throughout a script it is only its reference in memory that is being passed around not the actual object. This also means that the object is also not being copied or duplicated in any way as it is being passed around.

'use strict';

// JavaScript Objects
//  1. Mutable: they can be altered at will
//  2. Keyed Collections: keys point to values, other objects, or functions
//  3. Class-free: they are never predefined, no template
//  4. Keys are strings
//  5. Quotes around key strings are optional if the string is not a JS key word and is a proper JS identifier
//  6. Objects can be embedded
//  7. Objects are always passed by reference (never copied)

var emptyObject = {};

var person = {
    first_name: "Tim",       // Quotes optional since the property name string is a valid JS Identifier
    "last-name": "Clark",    // Quotes required since property name string is invalid
    address: {
        street: "143 South Main",
        city: "Salt Lake City",
        state: "Utah",
        zip: "84111"

// Retrieval of Object Properties
var firstName = person.first_name;  // . notation can be used due to valid JS Identifier
var lastName = person["last-name"]; // [] bracket notation required due to invalid JS Identifier

// Undefined: retrieving non-existent properties results in the Undefined value
var middleName = person.middle_name; // middleName === undefined [property does not exist]

// TypeError Exception: when retrieving a non-existent property from a non-existent property
var account = person.account;        // Undefined
var balance = person.account.balance; // TypeError
// Avoid error and get back just undefined
var account = person.account && person.account.balance; // Undefined

// Property Updates by assignment
person.first_name = "Freddy";

// Augmentation based on Non-existent Property Assignment
var middle_initial = person.middle_initial; // Undefined
person.middle_initial = "Argyle";
middle_initial = person.middle_initial; // "Argyle"