Pseudo classical inheritance and Prototypical OOP in JavaScript

prototypal-OOP-patterns.js

"use strict";

var Person = {
    init: function(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
        return this;
    },
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

// #1 - One way to initialize the object
var mike = Object.create(Person);
mike.init('Mike', 'Penzin');

console.log(mike.fullName());
// Output: Mike Penzin

// #2 - Another way to initialize the object
// Note: With this method we don't need init function inside Person
var alfred = Object.create(Person, {
    firstName: {
        value: "Alfred"
    },
    lastName: {
        value: "Koh"
    }
});

console.log(alfred.fullName());
// Output: Alfred Koh

//#3 - A way to initialize the object using a Factory function
// Note: With this method also, we don't need init function inside Person
function PersonFactory(firstName, lastName) {
    var person = Object.create(Person);
    person.firstName = firstName;
    person.lastName = lastName;
    return person;
}

var rudy = PersonFactory("Rudy", "Juliani");
console.log(rudy.fullName());
// Output: rudy Juliani

/* ################################ */
// We will add another prototype to the chain for example
var Professional = Object.create(Person);

var yossi = Object.create(Professional, {
    firstName: {
        value: 'Yossi'
    },
    lastName: {
        value: 'Cohen'
    },
    honorific: {
        value: 'Dr.'
    }
});

Professional.professional_fullName = function() {
    return this.honorific + " " + this.lastName + " " + this.firstName;
}

console.log(yossi.professional_fullName());
// Output: Dr. Cohen Yossi

console.log(yossi.fullName());
// Output: Yossi Cohen

pseudo-classical-inheritance.js

    "use strict";

    // We create new constructor function for person it will include first and last names
    function Person(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    };
    Person.prototype.fullName = function() {
            return this.firstName + " " + this.lastName;
        }
    // We will create new person object using Person blueprint.
    var dude = new Person("Mike", "Penzin");
    console.log(dude.fullName());
    // Output: Mike Penzin

    /* ################################ */
    // Now, we will create new constructor function for professional person with honorific add-on to first and last names
    function Professional(honorific, firstName, lastName) {
        // We use call method to use the Person constructor in order to keep code clean, 
        // then we will add to this object the honorific add-on
        Person.call(this, firstName, lastName);
        this.honorific = honorific;
    }
    
    // This line will bind both constructors so Professional constructor will use prototypes of Person.
    // We use it so new object created with constructor Professional can use prototypes of Person constructor 
    // such as fullName function
    Professional.prototype = Object.create(Person.prototype);

    // We will create new professional object using Professional blueprint.
    var newProf = new Professional("Dr.", "Alfred", "Koh");

    // We will add the following function to Professional prototype so we can print full name with honorific add-on
    Professional.prototype.professionalName = function() {
        return this.honorific + ' ' + this.lastName + ' ' + this.firstName;
    }
    
    // We will print full name as of Person prototype constructor prototype function
    console.log(newProf.fullName());
    // Output: Alfred Koh
   
    // We will print professional full name including honorific add-on using Professional constructor prototype function
    console.log(newProf.professionalName());
    // Output: Dr. Koh Alfred