Prototyping and OOP

When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck. — James Whitcomb Riley, 1849

Object Oriented Programming (OOP)

Object Oriented Programming is the concept of treating code like everyday physical objects. In real life, objects have characteristics which describe them, like how something might look or function. In code we call these characteristics properties. Sometimes objects can do things, like how a car can drive. In code we call these actions methods.

Objects in code can be created from a master blueprint. We call these master blueprints classes. You can create multiple objects, called instances from a single class, much how a factory can build multiple cars from the same blueprint. Even though there might be multiple cars from the same blueprint, each car can be unique and have its own color or features which differ from car to car. Likewise, in coding, multiple objects created from a class can have unique properties.

There are a few other conceptual computer science words that describe the principles of Object Oriented Programming that you should familiarize yourself with:

• Polymorphism — Ability to create objects from difference classes which use the same method.
• Encapsulation — Where properties and methods of an object are hidden from the rest of the application.
• Inheritance — Ability of a class to inherit properties or methods of a superclass.

JavaScript classes

JavaScript isn’t a true Object Oriented language, but it can act as one if you write your program using a particular set of patterns. Let’s start with writing an object blueprint, known as a class.

In JavaScript, a class is simply a function from which we can use to make multiple objects. Note that using standard conventions from other programming languages, classes typically are capitalized to indicate in a visual way they are classes.

function Person(name, age, profession){
    this.name = name;
    this.age = age;
    this.profession = profession;
}

In the above code, we create a new function and capitalize the name. We also create some variables using the this keyword. this is a special keyword in coding which refers to the object that is created from this class. We will see this in the next example.

Instantiating from a class

Creating objects from a class requires doing a process called instantiating which is making an “instance” of the class. We can create an instance from the above class we just wrote.

function Person(name, age, profession){
    //Remember, "this" refers to the object that is being instantiating from this class
    this.name = name;
    this.age = age;
    this.profession = profession;
}

//now let's instantiate a copy of this.
var employee1 = new Person("Joe", 42, "Journalist");
var employee2 = new Person("Jim", 45, "Coder");

console.log(employee1.name); //outputs Joe
console.log(employee2.age); //outputs 45

In the above example, we created two variables: employee1 and employee2 which are instances of the Person class. They both are independent variables, yet are derived from the same class.

Creating methods

Methods are functions that can be called on an object. Think verbs in the English language. These are actions that are executed.

function Person(name){
    this.name = name;

    this.changeName = function(newName){
        this.name = newName;
    }
}

var employee = new Person("Jim");
employee.changeName("Joe");

console.log(employee.name); //outputs Joe, because we changed name

Prototype to extend existing classes

Let’s say you have a class, and you want to add additional methods. JavaScript include a prototype property that allows you to extend classes.

function Person(name){
    this.name = name;
}

//after Person class has already been made, we can add additional methods
Person.prototype.changeName = function(newName){
    
}

JavaScript date class example

Let’s start by playing with the built-in Date class in JavaScript. (More information about the Date class can be found on the Mozilla Developer Network).

var today = new Date();

console.log(today.toLocaleTimeString()); //prints today's time

Next, we can extend the built-in Date class with our own methods.

Date.prototype.yesterday = function(){
    this.setTime(this.getTime() - 86400000);
    return this;
}

var time = new Date();
console.log(time.yesterday()); //will show you yesterday's date

Creating a mock quiz

Let’s say we wanted to create a small quiz system in JavaScript. We could create a class that performs all of the actions and stores all of the properties. We can also add a method to create the quiz.

Note: Example below requires jQuery

function Quiz(){
   
    this.questions = [];
   
    //method to add questions
    this.addQuestion = function(question){
        this.questions.push(question);
    }
   
    //create the quiz
    this.createQuiz = function(){
           
        for(var i=0; i<this.questions.length; i++){
            $("body").append(
                $("<label />")
                    .css("display", "block")
                    .text(this.questions[i])
                    .append($("<input />").attr("type", "text"))
                
            )
        }
       
        $("body").append('<br><input type="submit" />');  
   }
} 

Then, we can use the methods to add questions or create the quiz.

var quiz1 = new Quiz();

quiz1.addQuestion("What is the capital of California?");
quiz1.addQuestion("Who is on the 2 dollar bill?");
quiz1.createQuiz();