As the amount of JavaScript being written in modern web applications is growing, it’s necessary to look at how we can manage our code. This post uses the example of a monkey battling game to demonstrate how we can structure JavaScript with some object oriented conventions seen in the more strongly typed programming languages..

Combination Constructor/Prototype Pattern

One way to convert functional JavaScript into something object oriented is with the use of the Comibination Constructor/Prototype Pattern. This pattern is easy to follow if you've used object oriented programming languages before. You can define a function that acts as the object's (or class's) constructor, and then add functions to the object/class using Prototype.

Monkey game example

Here's an example of the Combination Constructor/Prototype pattern used in a fictional game of fighting monkeys, where monkeys battle against eachother. Each monkey has different attributes, providing certain advantages and disadvantages when coming up in battle against other monkeys.

JavaScript Constructors

We'll start by looking at the constructor for a Monkey object.

/**
* Monkey Constructor
*/
function Monkey(name, speed, power, agility){

  this.name = name;
  this.speed = speed;
  this.power = power;
  this.agility = agility
}

A constructor is basically used to set up the main characteristics of an object. Our monkey constructor takes a speed value for how fast he is, power for how strong his attacks are, and agility for things such as swinging ability.

So if we were to create a big strong monkey called King Kong, we'd do it in the following way:

var kingKong = new Monkey("King Kong",20,80,20)

This would create a new Monkey object, with the name "King Kong", a speed of 20 making him slow, a power of 80 (meaning he is very strong) and an agility value of 20 because he isn't very flexible. When passing these parameters to the Monkey constructor (by providing the new keyword), within the constructor, you'll notice the 'this' keyword being used to assign the object certain values. For instance, this.speed = speed assigns the object being created a speed of whatever is passed into the constructor.  this.speed is only accessible through the object you created. So if you did:

console.log(kingKong.speed)

The value '20' would be output to the console. 

Prototype functions

So we can create monkeys using the constructor, but at the moment they can't actually do anything. Every monkey can do similar things such as eat, run, swing and attack, and we can enable our object to carry out such actions through adding extra functions through each object's prototype. So lets just do it:

Monkey.prototype = {
    constructor: Monkey,
    eat:function(){
        console.log(this.name + " is eating");
    },
    run:function(){
        console.log(this.name + " is running at a speed of: " + this.speed);
    },
    swing:function(){
         console.log(this.name + " is swinging")
    },
    attack:function(){
        console.log(this.name + " is attacking with power of: " + this.power);
    }
}

So in line 2, we add the monkey constructor, and then thereafter we add a list of different functions for the actions we want our monkeys to do. Each of the functions simply log an action to the console. So if we do:

kingKong.swing();

..and open the console, we'll see "King Kong is swinging". Because we had assigned the monkey's name in the constructor, we can now access it using this.name (see line 4 above).

And then if we did:

kingKong.attack();

..it would output "King Kong is attacking with a power of 80". We get 80 here because again, that's what we passed into the constructor when creating our King Kong monkey object. This shows that this value is unique to this instance of the Monkey 'class'. If we created another monkey with different values, those values would only be available through the object created.

That's pretty much all there is to it, for more info read here.